ref屬性

1. 被用來給元素或子組件注冊引用信息（id的替代者）
2. 應(yīng)用在html標簽上獲取的是真實DOM元素，應(yīng)用在組件標簽上是組件實例對象（vc）
3. 使用方式：
   1. 打標識：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
   2. 獲?。?code>this.$refs.xxx

props配置項

1. 功能：讓組件接收外部傳過來的數(shù)據(jù)

2. 傳遞數(shù)據(jù)：<Demo name="xxx"/>

3. 接收數(shù)據(jù)：

   1. 第一種方式（只接收）：props:['name']

   2. 第二種方式（限制類型）：props:{name:String}

   3. 第三種方式（限制類型、限制必要性、指定默認值）：

      props:{
          name:{
          type:String, //類型
          required:true, //必要性
          default:'老王' //默認值
          }
      }
      

   備注：props是只讀的，Vue底層會監(jiān)測你對props的修改，如果進行了修改，就會發(fā)出警告，若業(yè)務(wù)需求確實需要修改，那么請復(fù)制props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)。

mixin(混入)

1. 功能：可以把多個組件共用的配置提取成一個混入對象

2. 使用方式：

   第一步定義混合：

   {
       data(){....},
       methods:{....}
       ....
   }
   

   第二步使用混入：

    全局混入：```Vue.mixin(xxx)```
    局部混入：```mixins:['xxx']  ```
   

插件

1. 功能：用于增強Vue

2. 本質(zhì)：包含install方法的一個對象，install的第一個參數(shù)是Vue，第二個以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。

3. 定義插件：

   對象.install = function (Vue, options) {
       // 1. 添加全局過濾器
       Vue.filter(....)
   
       // 2. 添加全局指令
       Vue.directive(....)
   
       // 3. 配置全局混入(合)
       Vue.mixin(....)
   
       // 4. 添加實例方法
       Vue.prototype.$myMethod = function () {...}
       Vue.prototype.$myProperty = xxxx
   }
   

4. 使用插件：Vue.use()

scoped樣式

1. 作用：讓樣式在局部生效，防止沖突。
2. 寫法：<style scoped>

總結(jié)TodoList案例

1. 組件化編碼流程：

    (1).拆分靜態(tài)組件：組件要按照功能點拆分，命名不要與html元素沖突。
   
    (2).實現(xiàn)動態(tài)組件：考慮好數(shù)據(jù)的存放位置，數(shù)據(jù)是一個組件在用，還是一些組件在用：
   
            1).一個組件在用：放在組件自身即可。
   
            2). 一些組件在用：放在他們共同的父組件上（<span style="color:red">狀態(tài)提升</span>）。
   
    (3).實現(xiàn)交互：從綁定事件開始。
   

2. props適用于：

    (1).父組件 ==> 子組件 通信
   
    (2).子組件 ==> 父組件 通信（要求父先給子一個函數(shù)）
   

3. 使用v-model時要切記：v-model綁定的值不能是props傳過來的值，因為props是不可以修改的！

4. props傳過來的若是對象類型的值，修改對象中的屬性時Vue不會報錯，但不推薦這樣做。