Vue进阶属性

Vue进阶属性

Directives（指令）

自定义指令

我们都知道一些内置的指令，例如

v-if v-for v-show v-html等

这里我们来讲一下如何自定义一个指令v-x

两种写法：

1. 声明一个全局指令

   Vue.directive('x',directiveOptions)
   

   这里的directiveOptions可以是下面几个函数

   • bind(el,info,vnode,oldVnode)： 当指令第一次绑定到上是使用（类似created)
     • info：除了元素以外的东西
     • vnode: 这个元素对应的虚拟节点
     • oldVnode : 旧的虚拟节点，因为这个元素可能是从一个旧节点更新过来的。
   • inserted(参数同上) ： 当元素被插入到父节点是调用
   • update(参数同上) ：所在组件更新时调用
   • componentUpdated (参数同上) 组件所在的VNode和全部的子VNode更新后调用
   • unbind(参数同上) :与bind相反，在元素解绑时调用 (类似destroyed)

   这样你就可以在任何组件里面使用 v-x 了

   例如

   
   Vue.directive('x',{
   inserted:function(el){    //你将指令放在哪里el就是什么
   el.addEventListener("click",()=>{
   console.log('你点击了我！')
   })
   }
   })
   //这样我们就绑定了一个自定义的点击事件了，你可以在任何的地方调用它
   //调用
   <div v-x>
       你好
   </div>
   //点击div时就会打印出相应的内容
   

2. 声明一个局部指令

   new Vue({
   ...,
   directives:{
   "x":directiveOptions
   }
   })
   

   这里的 v-x就只能用在该实例中。

指令的作用：

• 主要用于DOM操作

  Vue实例/组件用于数据绑定、事件监听、DOM更新

  Vue指令主要目的就是原生的DOM操作

• 减少重复

  如果某个DOM操作经常使用，那么就可以封装成指令

  如果某个DOM操作比较复杂，那么也可以封装成一个指令

mixins（混入）

虽然名字很高大上，但是其实混入就是复制

mixins就是将一些函数或者数据封装在一起，当某个组件需要使用时就通过mixins来导入

导入方法为：

import log from ".../.."//log名字随意
new Vue({
mixins:[log]
})

值得注意的是当混入的log里面的属性与原来的组件里面的属性重复是会自动合并。

作用：

减少data,methods,钩子的重复

provide和inject

祖先栽树（provide），后人乘凉（inject）

使用举例：

new Vue(){
	provide(){
	return {	
		name: this.name,
		sayHi: this.sayHi,
		changeName:this.changeName
		};
	},
	data(){
 	return {
		name: "蘑菇头"
		};
	},
	mothods:{
		sayHi:(){
			console.log("hi")
			},
		changeName(){
		this.name = "二哈"
				}
		}
}

引用：

new Vue({
inject:["name","sayHi"],
})

总结

• 作用：大范围的data和method等共用
• 注意：如果你想改变name的值，那么就不能只传name不传changeName，因为name的值是被复制给provide的。