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

本文主要是介绍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)
   })

这篇关于VUE基础之，ref属性，props配置项，mixin（混入）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---