vue的ref属性、props属性和mixin属性

一.ref属性：

        1.为尽量避免在vue框架中调用原生js的api获取元素（document.querySelector()/ document.getElementById()），应使用ref属性来给元素或者子组件注册引用信息（替代id）

        2.用在html标签上获取dom元素，用在子组件上获取组件实例对象

        3.使用方法：

// 标签：
<h1 ref="myH1"></h1>
<student ref="myStudent"></student>
// 使用：
this.$refs.myH1 //获取h1这个元素
this.$refs.myStudent //获取student组件实例对象

二.props：

        1.用于父组件向子组件传值，在父组件引用子组件标签时在标签上添加属性，子组件通过props接收，存放在组件实例对象身上

        父组件传值：

<template>
	<div>
		<children name="zhangsan"></children> // 通过给子组件标签绑定属性的方式传值
	</div>
</template>

<script>
	import children from './components/children'
	export default{
		components:{
			children
		}
	}
</script>

        子组件接收：

<template>
	<div>
		{{name}} // zhangsan
	</div>
</template>

<script>
	
	export default{
		props：['name'] // 子组件通过props属性接收，存储在组件实例对象VueComponent上
	}
</script>

         2.props接收的几种方式

                ①.简单声明接收：

                       

props:['name','age']

                ②.接收同时对数据类型进行限制：

                     

props:{
    name:String,
    age:Number
}

                ③.完整写法：

props:{
    name:{
        type:String, // 数据类型
        required:true, // 必须传入的
        defalut:'zhangsan' // 默认值（如果父组件没传值则使用这个默认值）
    }
}

注意事项：

1.props是只读属性，尽量避免修改props的值，如果必须要改，则需要通过在data里面再声明变量存储，且通过修改这个data里变量的方式修改数据（即复制外部传进来的数据到data中成为内部自己的数据，再通过修改这个内部数据完成修改需求）

<script>
	export default{
		data:{
            myName:this.name
        },
        props:['name']
	}
</script>

2.数据查找/使用优先级：props>methods>data>computed>watch

三.mixin属性：

        一.局部混入：

        1.mixin就是提取出组件间的公共配置（复用）

        2.步骤：①.新建一个mixin.js文件，

export var mixin = {
    methods:{
        show(){
            console.log(1)
        }
    },
    mounted(){
        console.log(2)
    }
}

                ②.引用：

                        

<script>
	import {mixin} from '../mixin'
	export default{
		mixins:[mixin]
	}
</script>

        3.如果mixin混入的数据和自己data和methods中的数据同名不同值，以data和methods中的数据为准，生命周期函数则是都触发，且混入的数据在前，自己组件配置的生命周期函数在后

        二.全局混入：

        1.在main.js里引入，通过Vue.mixin()在所有组件上挂载