vue入门学习知识要点总结（五），Vue在脚手架的使用，ref与props属性，混入(mixin)与插件理解

接上一篇文章继续总结Vue的入门知识，这里主要是关于在脚手架中的使用和理解ref、props、混入和插件

Vue在脚手架中的使用

ref属性

• 预期：string

  ref 被用来给元素或子组件注册引用信息（用于给节点打标识）。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

  //父组件（如app.vue）的模板内给子组件或dom元素加上标识
  <!-- `vm.$refs.p` will be the DOM node -->
  <p ref="p">hello</p>
  
  <!-- `vm.$refs.child` will be the child component instance -->
  <child-component ref="child"></child-component>
  	---
  //使用方法
  methods: {
  	showDOM(){
  		console.log(this.$refs.p) //真实DOM元素
  		console.log(this.$refs.child) //School组件的实例对象（vc）
  	}
  }
  

  关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候不能访问它们，他们还不存在！$refs 也不是响应式的，因此不应该试图用它在模板中做数据绑定。

props属性

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

设置数据：在父组件中设置需要传递给子组件的数据

DATA(){ //代指new Vue里的data，只为文章简写
	return {
        name:'你好'，
        age:17
    }
}

传递数据：在父组件的模板中挂载和使用子组件时，把属性传递给子组件，如：

<Demo name="哈哈" :age='age'/>

接收数据：在子组件中接收父组件传递来的属性

1. 第一种方式（只接收）：props:['name', 'age']

2. 第二种方式（限制类型）：props:{name:String, age:Number}

3. 第三种方式（限制类型、限制必要性、指定默认值）：

   props:{
   	name:{
   	type:String, //类型，限制传递过来的数据类型，不同会报错
   	required:true, //必要性，表示必须要给该属性传数据
   	},
       age:{
           type:Number
           default:'老王' //默认值
       }
   }
   

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

mixin(混入)

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

使用方式：

1. 定义混合：

   // 可以选择另外创建一个mixin.js文件，然后引入
   export const hunru = {
   	methods: {
   		showName(){
   			alert(this.name)
   		}
   	},
   	mounted() {
   		console.log('你好啊！')
   	},
   }
   export const hunru2 = {
   	data() {
   		return {
   			x:100,
   			y:200
   		}
   	},
   }
   

2. 使用混入：

   //全局混入，在main.js中引入
   import {hunru,hunru2} from './mixin'
   Vue.mixin(hunru)
   Vue.mixin(hunru2)
   
   //局部混入,在需要使用的组件中引入
   import {hunru,hunru2} from '../mixin'
   {
       data(){...},
       mixins:[hunru, hunru2]
   }
   

3. 然后可以在相应组件中直接使用里面的方法或数据，效果上类似在组件上直接配置一样。

选项合并：当组件和混入对象含有同名选项时，与Vue.extend() 使用同样的策略进行合并。

• 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
• 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

定义插件：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

对象.install = function (Vue, options) {
    //0.添加全局方法或 property
    Vue.myGlobalMethod = function () {
   		 // 逻辑...
  	}
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

//举个例子,可以创建一个plugins.js文件来定义
export default {
	install(Vue,x,y,z){
        //添加全局方法或 property
		console.log(x,y,z)
        
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令 | 添加全局资源
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入 | 注入组件选项
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

使用插件：Vue.use()

//举例，引入插件 
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins,1,2,3)

备注：

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，应该始终显式地调用 Vue.use()

本文参考了vue官方文档和尚硅谷张天禹老师的vue教程及资料。

欢迎交流