組件 - 簡書

一信粮、作用

提高代碼的復(fù)用性

二燥滑、注冊

1?全局注冊

Vue.component('my-component',{
    template: '<div>我是組件內(nèi)容</div>'
})

優(yōu)點(diǎn)：所有vue實(shí)例都可以使用

缺點(diǎn)：權(quán)取太大谜悟，容錯率降低

2?局部注冊

var app = new Vue({
    el: '#app',
    components:{//切記component后邊要加s
        'my-component':{
            template:'<div>我是局部注冊的一個組件</div>'
        }
    }
}}

3? vue 組件模板受html限制

在某些情況下會受到html標(biāo)簽的限制

比如直接在table中使用組件是無效的沛厨，可以使用 is屬性來掛載組件

//html
<div id="app">
  <my-component>我是組件內(nèi)容</my-component>
  
  <table>
     <my-component>我是組件內(nèi)容</my-component>
  </table>
  // 無效是因?yàn)閠able 中 只能有 tr,td,tbody這些元素觉阅，改成用is屬性即可
  
  <table>
    <tbody is="my-component"></tbody>
  </table>
  
</div>

//js
...
Vue.component('my-component',{
    template:'<div>我是組件內(nèi)容</div>'
})

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

三祭芦、技巧

1?必須用小寫字母命名（child孔厉、mycomponent 命名組件）

2?template 中的內(nèi)容必須是被一個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實(shí)例 https://jsbin.com/fucotab/edit?html,output】

四樱溉、props傳遞數(shù)據(jù) 父傳子

1?在組件中使用props 從父組件接收參數(shù)挣输，注：在props中定義的屬性，都可在組件中直接使用

2?props 來自父級的數(shù)據(jù) 福贞，而組件中data return的數(shù)據(jù)是組件自已的數(shù)據(jù)撩嚼，兩種情況作用域就是組件本身，可在template挖帘、computed完丽、methods中直接使用

//html
<div id="app">
    <h5>我是父組件</h5>//1?父組件通過msg給子組件傳遞消息：在子組件subcomponent上寫上msg 等于一個內(nèi)容
    <subcomponent msg="我是父組件傳遞的內(nèi)容"></subcomponent>
</div> //2?子組件要用到父組件傳過來的消息

//js
...
components:{
    subcomponent:{
        props: ['msg'], //數(shù)據(jù)來自父組件 2.1 props定義msg (以字符串?dāng)?shù)組形式)
        template:'<div>{{msg}}</div>' // 2.2 模板 template 就可以直接用了
    }     
}

3?props的值有兩種：一種是字符串?dāng)?shù)組（上述小例子就是)，另一種是對象

4?可以用v-bind動態(tài)綁定父組件來的內(nèi)容

//html
....
<subcomponent msg="我是來自父組件的內(nèi)容"></subcomponent>
<input type="text" v-model="parentMsg"> // 1?input v-model綁定的數(shù)據(jù)是父組件data 中的數(shù)據(jù)
{{ parentMsg}} 
//2?把綁定的數(shù)據(jù)同時傳遞給子組件： 通過v-bind綁定屬性msg,把屬性msg用props進(jìn)行接收
<bindcomponent v-bind:msg="parentMsg"></bindcomponent>

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

【Demo實(shí)例 https://jsbin.com/jodaxer/1/edit?html,output】

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

五拇舀、單向數(shù)據(jù)流props使用場景

1? 第一種：

? a逻族、父組件：傳遞初始值

? b、子組件：將它作為初始值保存起來骄崩，在自已的作用域下聘鳞，可隨意使用或修改

? 這種情況，可以在組件 data 內(nèi)再聲明一個數(shù)據(jù)要拂，引用父組件的 props

//html  
<div id="app"> //2.1 將父組件的數(shù)據(jù)傳遞進(jìn)來
   <my-component msg="父組件傳遞的消息"></my-component>
</div>

//js
var app = new Vue({
   el: '#app',
   components:{ // 1抠璃、注冊組件
       'my-component':{
           props: ['msg'],//2.2 在子組件中用props接收數(shù)據(jù)
           template: '<div>{{count}}</div>',
           data:function(){
             return{ //將傳遞進(jìn)來的數(shù)據(jù)用初始值保存起來
               count: this.msg//props中的值可以通過this.xxx直接來進(jìn)行獲取
             } 
           }
       }
   }
})
   
分三步曲完成：
1? 注冊組件
2、將父組件的數(shù)據(jù)傳遞進(jìn)來脱惰，并在子組件中用props接收
3搏嗡、將傳遞進(jìn)來的數(shù)據(jù)通過初始值保存起來

2? 第二種

props 作為需要被轉(zhuǎn)變的原始值傳入，這種情況用 計算屬性 就可以

//html
<div id="app">
 <input type="text" v-model="width">
 <my-component :width="width"></my-component>//2.1 將父組件的數(shù)據(jù)傳遞進(jìn)來
</div>

//js
var app = new Vue({
    el: '#app',
    data:{
        width: 0
    },
    components:{//1拉一、注冊組件
        'my-component':{
            props: ['width'],//2.2 在子組件中用props接收數(shù)據(jù)
            template:'<div :style="style"></div>',
            computed:{//3?將傳遞進(jìn)來的數(shù)據(jù)采盒，通過計算屬性重新計算工
                style:function(){
                    return{
                        width: this.width+'px',
                        background:'green',
                        height:'20px'
                    }
                }
            }
        }
    }
})

分三步曲完成：
1?注冊組件
2?將父組件的數(shù)據(jù)傳遞進(jìn)來，并在子組件中用props接收
3?將傳遞進(jìn)來的數(shù)據(jù)蔚润，通過計算屬性重新計算工