自定义组件的 v-model和.sync修饰符

原创已于 2023-03-17 17:59:16 修改 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-17 17:31:47 首次发布

前端 vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了如何在Vue.js中利用v-model和.sync修饰符实现父子组件之间的数据同步。详细介绍了v-model在父组件中使用的方法，以及子组件如何通过.sync修饰符将内部值更新通知给父组件。

实现父子组件数据同步

v-model

父组件

<template>
  <div>
    <input type="text" v-model="msg" />
    <!-- <son :value="msg" @input="msg = $event"></son> -->
    <!-- 简写 -->
    <son v-model="msg"></son>
  </div>
</template>

<script>
import son from "./s.vue";
export default {
  name: "myFather",
  data() {
    return {
      msg: "",
    };
  },
  components: { son },
};
</script>

子组件

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "mySon",
  data() {
    return {};
  },
  props: ["value"],
};
</script>

sync修饰符

父组件

<template>
  <div>
    <input type="text" v-model="money" />
    <!-- 绑定自定义事件@update:money -->
    <!-- <son :money="money" @update:money="money= $event"></son> -->
    
    <!-- 简写  :money.sync 1.给子组件传递props[money] 2.绑定了一个自定义事件update:money  -->
    <son :money.sync="money"></son>
  </div>
</template>

<script>
import son from "./s.vue";
export default {
  name: "myFather",
  data() {
    return {
      money: "",
    };
  },
  components: { son },
};
</script>

子组件

<template>
  <div>
    <input
      type="text"
      :value="money"
      @input="$emit('update:money', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "mySon",
  data() {
    return {};
  },
  props: ["money"],
};
</script>