Vue学习：Vue中的ref属性、props属性和mixin属性

一、Vue中的ref属性

1、ref属性用来给元素或者子组件注册引用信息（id的替代者）；

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

3、使用方式：

打标识：<h1 ref="xxx"></h1>或<school ref="xxx"></school>

获取：this.$refs.xxx

二、Vue中的props属性

Vue中的props用于组件的传值，其意义就是为了接收外部传入的数据，与data、methods等同级；

在接收数据过程中，分为以下三种情况：

1、简单声明接收

形如：props:['name','sex','age']；

2、接收的同时对数据进行限制

形如：

props:{

name:String,

age:Number,

sex:String

}

3、接收的同时对数据进行类型限制+默认值的指定+必要性的限制

形如：

props:{

            name:{

                type:String,  //name的类型是字符串

                required:true  //名字是必要的

            },

            age:{

                type:Number,

                default:99  //默认值

            },

            sex:{

                type:String,

                required:true

            }

        }

注意：props的优先级是大于data的。

三、Vue中的mixin属性

mixin属性定义：就是两个组件共享一个相同的配置。

应用：比如新建一个mixin.js文件，写入

export const hunhe={

 methods:{

  showName(){

     alert(this.name)

  }

}

然后在组件中应用：mixin:[hunhe]；（注意需要先导入mixin.js文件）。

注意：当新加入的mixin.js文件中的属性和组件中的属性冲突时，如data属性、methods属性等，是以组件中的属性为准的，但当生命周期钩子出现冲突时，是都应用的，且mixin.js文件中的钩子先使用。