vue自定义组件实现双向绑定

场景：
@H_360_4@

我们比较常用的父子组件之间的交互方式：
父组件通过PRops将数据流入到子组件；
子组件通过$emIT将更新后的数组发送的父组件；

今天，我们通过另一种方式实现交互，参考input框的v-model，实现自定义组件的双向数据绑定。
即：父组件值改变，子组件的值跟着改变；反之，子组件值发生变化，父组件值随之变化

子组件定义：

由于不能直接修改props属性值，我们这里定义valueData，通过监听实时接收value值，通过click方法修改valueData。
这里注意model语法糖prop 是接收的props属性value，保持一致。event是先上传递的事件名。

代码如下：

template>
      div>
        div>
{
{
 `子组件值: ${
value}
` }
}
    /div>
        div @click="click">
    点击此处修改值/div>
      /div>
    /template>
    script>
export default {
  name: "",  model: {
    prop: "value",    event: "change"  }
,  props: {
    value: Number  }
,  components: {
}
,  data() {
    return {
      valueData: ""    }
    ;
  }
,  watch: {
    value(newValue, oldValue) {
          this.valueData = newValue;
      console.LOG(`子组件值：${
newValue}
    `);
    }
  }
,  created() {
  }
,  mounted() {
  }
,  methods: {
    click() {
          this.valueData++;
          this.$emit("change", this.valueData);
    }
  }
}
    ;
    /script>
    style lang='less' scoPEd>
    /style>
    

父组件定义：

父组件通过v-model绑定text值，名称不一定是value，可以是其他任意符合命名规范的字符串，这里是text。
子组件通过change事件更新数据后，v-mode绑定值随之变化。
或者父组件修改text值后，子组件value值随之变化。

代码如下：

template>
      div>
        div>
{
{
 `父组件值：${
text}
` }
}
    /div>
        div @click="click">
    点击此处修改值/div>
        span>
    -----------------------------------------------------------/span>
        test-children v-model="text">
    /test-children>
      /div>
    /template>
    script>
    import TestChildren From "@/views/TestChildren";
export default {
  name: "",  components: {
 TestChildren }
,  data() {
    return {
      text: 1    }
    ;
  }
,  created() {
  }
,  mounted() {
  }
,  watch: {
    text(newValue, oldValue) {
      console.log(`父组件值：${
newValue}
    `);
    }
  }
,  methods: {
    click() {
          this.text--;
    }
  }
}
    ;
    /script>
    style lang='less' scoped>
    /style>
    

结果：

直接copy代码到自己项目测试。无论是通过父组件改变值，还是子组件改变值。两个组件通过v-mode绑定的值始终保持一致。

答疑：

有同学就问了 ，这不是和通过props向下流入数据，再通过$emit方式向上传递数据一样么也能实现我这种双向绑定的效果。 其实不然，如果不通过v-model，那么我们势必会在父组件写这样的代码：

test-children @change="changeText">
    /test-children>
    

然后在通过定义changeText方法修改text值。

试想，当我们的页面比较复杂，引用组件量比较庞大，页面中就需要多定义这样十几、二十几个方法。可阅读行大大降低，增加了维护成本。

扩展：

vue2.3之后提供了sync方式，也能实现双向绑定

父组件中的写法：

test-children :value.sync="text">
    /test-children>
    

子组件中不需要使用下面model定义，直接删除即可。

model: {
prop: “value”,event: “change”}
    ,

向父组件传递数据使用如下方式：

this.$emit("update:value", this.valueData);
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Vue2实现组件props双向绑定
• 深入理解vue.js双向绑定的实现原理
• Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
• Vue 实现双向绑定的四种方法
• Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
• Vue父子组件双向绑定传值的实现方法
• Vue.js每天必学之数据双向绑定
• Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
• Vue实现双向绑定的方法
• vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！