Vue的ref属性、props属性、mixin混合、定义plugin插件

1. ref属性

1. 被用来给HTML元素或子组件注册引用信息(id的替代者)
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象vc

使用示例App.vue：

<template>
	<div>
		<button ref="btn" @click="showDOM">点我输出所有标签的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		methods: {
			showDOM(){
				console.log(this.$refs.btn) // 真实DOM元素
				console.log(this.$refs.sch) // School组件的实例对象vc
			}
		}
	}
</script>

效果如下。点击按钮控制台进行输出

2. props属性

• 功能：让组件接收外部传过来的数据。实现组件共享，但数据独立。除了传递数据，还能传递函数
• 传递数据：<Student name="李四" :age="18"/>。如果数据多个组件都需要使用，可以将数据放在他们共同的父组件上
• 接收数据：有三种声明方式。简单声明接收、接收的同时对数据进行类型限制、接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制。如果不使用props接收，数据会临时保存在VC.$attrs上
• 注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告(修改对象的属性，监测不到而不会发出警告)。若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。因为先加载props的数据，再加载data中的数据。且props的数据比data的优先级高
• 不足：虽然props属性能够传递数据。但是功能不够强大。可以使用全局事件总线、消息队列订阅与发布、Vuex实现组件之间的数据传递

使用示例：
Student.vue组件。在updateAgeAndShowName方法中，调用了this.showStudentName方法

<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{myAge+1}}</h2>
    <button @click="updateAgeAndShowName">点我年龄加1，并打印name</button>
  </div>
</template>

<script>
export default {
  name:'Student',
  data() {
    return {
      myAge:this.age
    }
  },
  methods: {
    updateAgeAndShowName(){
      this.myAge++
      // 接收函数，然后进行调用
      this.showStudentName(this.name)
    }
  },
  // 方式一：简单声明接收。声明但未传入的值是undefined
  props:['name', 'age', 'showStudentName']

  // 方式二：接收的同时对数据进行类型限制
  /* props:{
    name:String,
    age:Number    // 接收的不是Number，会报错，但也会运行
  } */

  // 方式三：接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
  /* props:{
    name:{
      type:String,
      required:true,   // name是必要的
    },
    age:{
      type:Number,
      default:99 // 默认值
    }
  } */
}
</script>

App.vue组件

<template>
  <div>
    <!-- 给props传递值。age值相当于表达式，就是数字18 -->
    <!-- 传递函数showStudentName -->
    <Student name="李四" :age="18" :showStudentName="showStudentName"/>
  </div>
</template>

<script>
import Student from './components/Student'

export default {
  name:'App',
  components:{Student},
  methods:{
    showStudentName(name){
      console.log('Student.vue调用我了，我获取到的name值是: ',name)
    }
  }
}
</script>

结果如下。点击按钮，输出App.vue中的内容

3. mixin混合

• 功能：可以把多个组件共用的配置提取成一个混入对象，然后混入到VueComponent和Vue。相同的属性会进行混合；如果是生命周期回调函数，都会生效，但优先级比VueComponent和Vue的低
• 使用方式：
  1. 第一步: 定义混合：export const mixin1 = {}。里面可以是VueComponent的所有属性
  2. 第二步：使用混入：
     • 全局混入：在main.js使用Vue.mixin(xxx)进行全局混入，vm和所有的vc都会影响
     • 局部混入：mixins:[mixin1, mixin2]

使用示例：
School.vue组件：混入了showName函数和mounted函数

<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
	</div>
</template>

<script>
	// 引入mixin混合
	import {mixin1,mixin2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'第一中学'
			}
		},
    // 局部混入
		mixins:[mixin1,mixin2]
	}
</script>

Student.vue组件：混入了showName函数和mounted函数

<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
	</div>
</template>

<script>
	import {mixin1,mixin2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三'
			}
		},
		mixins:[mixin1,mixin2]
	}
</script>

App.vue组件

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

mixin.js: 定义了两个mixin混合showName和mounted函数

// 分别暴露
export const mixin1 = {
	methods: {
		showName(){
			alert(this.name)
		}
	}
}
export const mixin2 = {
	mounted() {
		console.log('hello')
	}
}

main.js: 可以在main.js中进行全局混合

import Vue from 'vue'
import App from './App.vue'
// 引入mixin
// import {mixin1,mixin2} from './mixin'
Vue.config.productionTip = false

// 全局混合
// Vue.mixin(mixin1)
// Vue.mixin(mixin2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

效果如下。点击学生名字有弹窗，控制台输出两个helo

4. 定义plugin插件

用于增强Vue。本质是包含install方法的一个对象

App.vue组件

<template>
	<div>
	</div>
</template>

<script>

	export default {
		name:'App'
	}
</script>

plugins.js: 定义一个插件：

• 插件必须有install方法，由Vue自动调用
• 第一个参数默认是Vue，这样就可以使用Vue定义全局过滤器、定义全局指令、给原型对象添加方法和属性
• 还可以接收用户自己定义的参数

export default {
	install(Vue,x,y,z){
		// 定义混入
		Vue.mixin({
			data() {
				return {
					x:100
				}
			}
		})
	}
}

main.js：引入插件和使用插件

import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from './plugins'
Vue.config.productionTip = false

// 使用插件
Vue.use(plugins,1,2,3)

new Vue({
	el:'#app',
	render: h => h(App)
})

可以看到Root就会有全局混合的属性x。如下所示：