VUE基础之，ref属性，props配置项，mixin（混入）

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)
   })