ITPub博客

首页 > 数据治理 > 数据治理 > 两种语法糖,搞定Vue组件Prop的双向绑定

两种语法糖,搞定Vue组件Prop的双向绑定

原创 数据治理 作者:爱喝啤酒的雷神 时间:2020-09-18 15:55:46 0 删除 编辑
无论是vue还是react,在父子组件通讯的时候,子组件都禁止直接修改父级传过来的prop,父组件总需要在子组件身上监听一个事件,然后由子组件去触发它,好让父组件来接收到payload去改变state。能不能直接在子组件里修改prop,然后父组件中的state也随之改变呢? 其实本质上是不行的,但幸运的是,vue为我们准备了两个语法糖做到了这一点,让我们减少了一点写大量模板代码的痛苦。它们就是自定义组件上的 v-model指令以及 .sync修饰符。

假如我们有如下的一个父组件,想为子组件传递一个名为val的prop,并且期待有双向绑定的效果:

<template>
  <child-component :val="val" />
</template>
<script>
export default {
  data() {
    return {
      val: 100
    }
  }
}
</script>
而子组件负责接收val,并且每click一次button,则让val+2:
<template>
  <div>
    <div>{{val}}</div>
    <button @click="handleClick">click</button>
  </div>
</template>

通过v-model

一个组件上的 v-model 默认会利用名为  value 的 prop 和名为  input 的事件,但是像单选框、复选框等类型的输入控件可能会将  value attribute 用于不同的目的。利用 model 选项可以用来避免这样的冲突。换句话说,你可以将 v-model的prop以任意名称来接收,不一定要使用 value, 事件名称也可以是任意的,不一定非要写成 input。如下例:

父组件通过v-model传递val值:

<template>
  <child-component v-model="val" />
</template>
而子组件内通过model选项去绑定这个prop:
export default {
  model: {
    prop: 'anyKey',  // 不一定非要是value
    event: 'anyEventName'  // 不一定非要是input
  },
  props: {
    anyKey: {
      type: Number
    }
  },
  methods: {
    handleClick() {
      this.$emit('anyEventName', this.anyKey+2)
    }
  }
}
父组件里的  val 的值将会传入这个名为  anyKey 的 prop。同时当子组件 <child-component> 触发一个  anyEventName 事件并附带一个新的值的时候,父组件 val 的 state 将会被更新。

通过.sync修饰符

父组件通过.sync修饰符传递val值:

<template>
  <child-component :val.sync="val" />
</template>
子组件内接收更简单,因为vue内部帮我们绑定了 update:myPropName这样一个事件:

export default {
  props: {
    val: {
      type: Number
    }
  },
  methods: {
    handleClick() {
      this.$emit('update:val', this.val+2)
    }
  }
}
.sync修饰符写起来更简便一些,双向绑定爽歪歪。不过有一点要注意,像 v-bind.sync=”{ title: doc.title }”这种绑定字面量对象,修饰符是无法正常工作的。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69984138/viewspace-2722293/,如需转载,请注明出处,否则将追究法律责任。

上一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2020-09-18

  • 博文量
    31
  • 访问量
    13816