vue的ref、props和minxin混入

目录

一、ref 和 props

1.ref 属性

2.props 配置

二、mixin 混合

一、ref 和 props

1.ref 属性

（1）被用来给元素或子组件注册引用信息（id 的替代者）

（2）应用在 html 标签上获取的是真实的 DOM 元素，应用在组件标签上是组件实例对象（vc）

（3）使用方式：

1. 打标识：<h1 ref="xxx">......</h1> 或 <school ref="xxx"></school>
2. 获取：this.$refs.xxx

2.props 配置

（1）功能：让组件接收外部传过来的数据

（2）传递数据：<Demo name="xxx" />

（3）接收数据：

1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:string}
3. 第三种方式（限制类型、限制必要性、指定默认值）：

   props:{
       name:{
           type:String,    //类型
           required:true,    //必要性
           default:'sexage'    //默认值
       }
   }

   注意：必要性和默认值一般不同时出

备注：props 是只读的，Vue 底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props 的内容到 data 种一份，然后去修改 data 种的数据。

二、mixin 混合

1.功能：可以把多个组件公用的配置提取成一个混入对象

2.使用方式：

        第一步定义混合：

export const hunhe = {
    data(){
        return{
            ......
        }
    },
    methods:{
        ......
    },
    ......
}

        第二步使用混合：

           全局混合：Vue.mixin(xxx) (在 main.js 里面写)
           局部混入：mixins:['xxx'] (在组件里面引入混合后，再在 mixins 配置项里面以数组形式写，可配置多个混合)

注意：

        组件里面和混合里面都有的，以组件里的为主，不破坏组件里的代码。
        生命周期钩子，不以任何为主，都要！！！（混合里面的顺序在前，组件里的顺序在后）