ref屬性

1. 被用來給元素或子組件注冊引用信息（id的替代者）

2. 應用在html標簽上獲取的是真實DOM元素，應用在組件標簽上是組件實例對象（vc）

3. 使用方式：

   1. 打標識：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>

   2. 獲取：this.$refs.xxx

props配置項

1. 功能：讓組件接收外部傳過來的數據

2. 傳遞數據：<Demo name="xxx"/>

3. 接收數據：

   1. 第一種方式（只接收）：

      props:['name']

   2. 第二種方式（限制類型）：

      props:{name:String,age:Number
      }

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

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

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

mixin(混入)

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

2. 使用方式：

3. 如果mixin里面和自己定義的組件里面都寫了同一個屬性，那么一mixin為主，除鉤子函數以外。鉤子函數兩個都要，都會接受

   第一步定義混合：

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

   第二步使用混入：

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

   注：如果要引入兩個混合則?mixin:['xxx','hhh']

4. 例如：（局部）

   //組件1
   <template><div><h2 @click="showName">學校名稱：{{ name }}</h2><h2>學校地址：{{ address }}</h2></div>
   </template>
   ?
   <script>
   import { hunhe } from '../mixin';
   export default {name: 'TheStudent',data() {return {name: '',address:'長沙·望城'}},mixins: [hunhe]
   }
   </script>

   //組件2
   <template><div><h2 @click="showName">學生姓名：{{name}}</h2><h2>學生年齡：{{age}}</h2></div>
   </template>
   ?
   <script>
   import { hunhe } from '../mixin';
   export default {name:'TheSchool',data() {return { ? name:'lisa' ,age:19 }},mixins:[hunhe]
   }
   </script>

   //mixin混合
   export const hunhe = {methods: {showName() {alert(this.name)}}
   }

   全局混合：整個應用里面所有的vc和vm都會得到混合里面的東西

   // 引入vue.js
   import Vue from 'vue'
   ?
   //引入App組件，它是所有組件的父組件
   import App from './App.vue'
   import {hunhe
   } from './mixin'
   ?
   //關閉vue的生產提示
   Vue.config.productionTip = false
   Vue.mixin(hunhe)
   ?
   //創建Vue實例對象---vm
   new Vue({el: '#app',//render函數完成了這個功能：將App組件放入容器中render: h => h(App)
   })