Vue自定义双向绑定-蒲公英云

Vue自定义双向绑定

父子组件双向绑定v-model

非表单元素

<!-- children.vue -->
<template>
  <h1>{ {  message }}</h1>
</template>
<script>
export default { 
  model: { 
    prop: "message ", // 父组件设置v-model的变量值，v-model="message"
    event: "message-event" // 父组件监听message事件
  },
  props: { 
    // 须定义和model相同的props名称，v-model传值给子组件message
    message: { 
      type: String,
      default: ""
    }
  },
  mounted() { 
    //模拟传值，实现双向控制
    setTimeout(() => { 
      let newvalue = "new value";
      this.$emit("message-event", newvalue);
    }, 3000);
  }
};
</script>
<!-- parent.vue -->
<template>
  <children v-model="message"></children>
</template>
<script>
import children from "@/components/children.vue";
export default { 
  components: { 
    children
  },
  data() { 
    return { 
      message: "initial value"
    };
  },
  watch: { 
    message(newVal, oldVal) { 
      console.log(newVal, oldVal);
    }
  }
};
</script>

1.非表单元素使用自定义v-model进行双向绑定传值，以上所示
2.表单元素input，radio等监听表单的input或者change事件，实时将value或者checked通过$emit传递

父子组件多个双向绑定

v-model实现单个prop值的双向绑定，当组件的需求需要复杂的操作，需要多个双向值，就需要用到.sync修饰符

<!-- children.vue -->
<template>
  <h1>{ {  message }}</h1>
</template>
<script>
export default { 
  props: { 
    message: { 
      type: String,
      default: ""
    }
  },
  mounted() { 
    //模拟传值，实现双向控制
    setTimeout(() => { 
      let newvalue = "new value";
      this.$emit("update:message", newvalue);
    }, 3000);
  }
};
</script>
<!-- parent.vue -->
<template>
  <children message.sync="message"></children>
</template>
<script>
import children from "@/components/children.vue";
export default { 
  components: { 
    children
  },
  data() { 
    return { 
      message: "initial value"  // 可以为Object
    };
  },
  watch: { 
    message(newVal, oldVal) { 
      console.log(newVal, oldVal);
    }
  }
};
</script>

.sync实现双向绑定，绑定对象Object时，仍可实现对象内部参数值的双向绑定
注意：子组件更新prop属性值仍要$emit去触发update:prop，更新父组件的变量值实现双向数据流，不可直接对prop的属性直接赋值

<template>
    <children :message.sync="message"></children>
    <children :message="message" @update:message="message = $event"></children>
    <!-- 两行代码是等价的，$event为子组件$emit传递的参数 -->
</template>