组件 - 简书

一、作用

提高代码的复用性

二、注册

1､全局注册

Vue.component('my-component',{
    template: '<div>我是组件内容</div>'
})

优点：所有vue实例都可以使用

缺点：权取太大，容错率降低

2､局部注册

var app = new Vue({
    el: '#app',
    components:{//切记component后边要加s
        'my-component':{
            template:'<div>我是局部注册的一个组件</div>'
        }
    }
}}

3､ vue 组件模板受html限制

在某些情况下会受到html标签的限制

比如直接在table中使用组件是无效的，可以使用 is属性来挂载组件

//html
<div id="app">
  <my-component>我是组件内容</my-component>
  
  <table>
     <my-component>我是组件内容</my-component>
  </table>
  // 无效是因为table 中 只能有 tr,td,tbody这些元素，改成用is属性即可
  
  <table>
    <tbody is="my-component"></tbody>
  </table>
  
</div>

//js
...
Vue.component('my-component',{
    template:'<div>我是组件内容</div>'
})

var app = new Vue({
    el: '#app'
}

三、技巧

1､必须用小写字母命名（child、mycomponent 命名组件）

2､template 中的内容必须是被一个DOM 元素包括，也可以嵌套

3､在组件定义中，除了template外，其他选项也可以用（data、computed、methods）

4､data 必须是一个方法

// html
<div id="app">
 <btn-component></btn-component>
<div>

//js
...
components:{
  'btn-component':{
      template: '<button @click="count++">{{count}}</button>',
      data:function(){ //切记data必须是一个方法
          return{ //每次return 返回的是不同的 data对象
                  count:0
          }
       }
    }
 }

【Demo实例 https://jsbin.com/fucotab/edit?html,output】

四、props传递数据父传子

1､在组件中使用props 从父组件接收参数，注：在props中定义的属性，都可在组件中直接使用

2､props 来自父级的数据，而组件中data return的数据是组件自已的数据，两种情况作用域就是组件本身，可在template、computed、methods中直接使用

//html
<div id="app">
    <h5>我是父组件</h5>//1､父组件通过msg给子组件传递消息：在子组件subcomponent上写上msg 等于一个内容
    <subcomponent msg="我是父组件传递的内容"></subcomponent>
</div> //2､子组件要用到父组件传过来的消息

//js
...
components:{
    subcomponent:{
        props: ['msg'], //数据来自父组件 2.1 props定义msg (以字符串数组形式)
        template:'<div>{{msg}}</div>' // 2.2 模板 template 就可以直接用了
    }     
}

3､props的值有两种：一种是字符串数组（上述小例子就是)，另一种是对象

4､可以用v-bind动态绑定父组件来的内容

//html
....
<subcomponent msg="我是来自父组件的内容"></subcomponent>
<input type="text" v-model="parentMsg"> // 1､input v-model绑定的数据是父组件data 中的数据
{{ parentMsg}} 
//2､把绑定的数据同时传递给子组件： 通过v-bind绑定属性msg,把属性msg用props进行接收
<bindcomponent v-bind:msg="parentMsg"></bindcomponent>

//js
...
data:{
  parentMsg: '开始啦'      
}
components:{
    'bindcomponent':{
        props: ['msg'],
        template: '<div>{{msg}}</div>'//3､就可以在template中直接使用
    }     
}

【Demo实例 https://jsbin.com/jodaxer/1/edit?html,output】

参考 https://cn.vuejs.org/v2/guide/components-props.html

五、单向数据流props使用场景

1､第一种：

a、父组件：传递初始值

b、子组件：将它作为初始值保存起来，在自已的作用域下，可随意使用或修改

这种情况，可以在组件 data 内再声明一个数据，引用父组件的 props

//html  
<div id="app"> //2.1 将父组件的数据传递进来
   <my-component msg="父组件传递的消息"></my-component>
</div>

//js
var app = new Vue({
   el: '#app',
   components:{ // 1、注册组件
       'my-component':{
           props: ['msg'],//2.2 在子组件中用props接收数据
           template: '<div>{{count}}</div>',
           data:function(){
             return{ //将传递进来的数据用初始值保存起来
               count: this.msg//props中的值可以通过this.xxx直接来进行获取
             } 
           }
       }
   }
})
   
分三步曲完成：
1､ 注册组件
2、将父组件的数据传递进来，并在子组件中用props接收
3、将传递进来的数据通过初始值保存起来

2､第二种

props 作为需要被转变的原始值传入，这种情况用 计算属性 就可以

//html
<div id="app">
 <input type="text" v-model="width">
 <my-component :width="width"></my-component>//2.1 将父组件的数据传递进来
</div>

//js
var app = new Vue({
    el: '#app',
    data:{
        width: 0
    },
    components:{//1、注册组件
        'my-component':{
            props: ['width'],//2.2 在子组件中用props接收数据
            template:'<div :style="style"></div>',
            computed:{//3､将传递进来的数据，通过计算属性重新计算工
                style:function(){
                    return{
                        width: this.width+'px',
                        background:'green',
                        height:'20px'
                    }
                }
            }
        }
    }
})

分三步曲完成：
1､注册组件
2､将父组件的数据传递进来，并在子组件中用props接收
3､将传递进来的数据，通过计算属性重新计算工

组件

一、作用

二、注册

三、技巧

四、props传递数据 父传子

五、单向数据流props使用场景

四、props传递数据父传子