vue 自定义指令示例 v-prop

1、v-prop

vue框架子组件是不允许修改父组件传进来的props值。

v-prop是实现一个子组件可以修改父组件prop传进来值的指令，修改属性后，子组件的props的值更新，但是不影响父组件原来的值。

微信小程序子组件可以修改父组件传进来prop值。

2、实现

import _ from 'lodash'
// 注册一个全局自定义指令 `v-prop`
Vue.directive('prop', {
  // 只调用一次，指令第一次绑定到元素时调用。
  bind(el,binding,vnode){
    // 指令参数
    const dataName = binding.arg;
    vnode.componentInstance[dataName]=binding.value;
  },
  // update钩子函数
  update(el,binding,vnode){
    log(el,binding,vnode,'el,binding,vnode')
    // 指令参数
    const dataName = binding.arg;

    // 说明父组件的绑定值发生了更新
    // 父组件data中仅传入的值发生改变时，才更新子组件内容
    // 父组件data中其他值的改变，不会重新渲染子组件
    if (!_.isEqual(binding.value, binding.oldValue)) {
      vnode.componentInstance[dataName]=binding.value;
    }
  },
})

 

来源：oschina

链接：https://my.oschina.net/u/4351537/blog/4270292