vue-组件0.1

组件

• 封装可重用一样

• 为了项目维护来拆分页面

组件的使用步骤

• 创造组建的 构造器

• 注册组件

• 使用组件

组件分类

• 全局组件

Vue.component("my-extend",{
            template:`  
          <div>
                <div>我是组件</div>
                <div>{{msg}}</div>
            </div>`,
            data(){
              return {
                  msg:'这是msg'
              }
          }
        })

• 局部组件

var myextend = Vue.extend({
          template:`  
          <div>
                <div>我是组件</div>
                <div>{{msg}}</div>
            </div>         `,  //外面用一个div包裹起来，不然可能会报错
          data(){
              return {
                  msg:'这是msg'
              }
          }
      })
      var vm = new Vue({
          el:"#root",
          data:{
              
          },
          components:{
              "my-extend":myextend
          }
      })

• 构造器方法（这个不常用，pass）

注意

• 组件里不能用大写字母命名

• 当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。

• 组件必须挂载在某个Vue实例下，否则它不会生效

使用构造器

 var myCpn = Vue.extend({
            template: `
             <div>
                <h1>这是用构造器写的组件</h1>
            </div>
            `
        })

语法糖

Vue.component('myYft',{
            template: `
             <div>
                <h1>这是用语法糖写的组件</h1>
            </div>
            `
        })

• 创建组件对象

var myCom = {
            template: `
             <div>
                <h1>这是用创建组件对象写的组件</h1>
            </div>
            `
        }

• 全局注册

    Vue.component('my-cpn',myCpn)

• 局部注册

    new Vue({
              el: '#root',
              components: {
                  "my-com":myCom
              }
          })

template

• 例子

<template id="sons">
        <div>
            <p>{{msg}}</p>
            <button @click="change">加</button>
        </div>
    </template>
​
    <script>
        var son ={
            template:"#sons",
            data(){
                return {
                    msg:0
                }
            }}
            ...
    </script>       

组件传值

标签：vue,extend,0.1,var,msg,Vue,template,组件
来源： https://blog.csdn.net/weixin_51197518/article/details/122462670