Vue自定义双向绑定

太过爱你忘了你带给我的痛 2023-06-25 07:56 5阅读 0赞

#### 父子组件双向绑定v-model ####

> 非表单元素

<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>

<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修饰符

<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>

<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的属性直接赋值