vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)

父子组件传值

父组件向子组件传值

若传入常量，直接在子组件标签上添加属性

字符串

<Child name= '朝阳' />

布尔值

必须加上：，否则会作为字符串传入

1. <C

简写方式：

<Child disabled />

默认传入的disabled值为true，若不写则相当于传入false

数值

必须加上：，否则会作为字符串传入

<Child :age= '30' />

变量

若传入变量，则必须使用:（v-bind指令的简写）

<Child :title="childTitle" />

子组件接收数据

子组件通过props接收父组件传入的数据

props: {
    title: String,
},

子组件修改父组件传入的数据

1. 子组件通过 this.$emit 将新值传出

this.$emit("ChangeTitle", "新标题");

若需判断父组件是否绑定某事件

if(this.$emit('自定义事件名')){
   ……
}

2. 父组件引用子组件时，绑定$emit中对应的事件

<Child :tiltle="childTitle" @ChangeTitle="ChangeTitle" />

3. 父组件中绑定的事件接收子组件传出的新值

ChangeTitle(val) {
  this.childTitle = val;
}

父子组件数据双向绑定

双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

所以，推荐以 update:myPropName 的模式触发事件来模拟双向绑定。（原文参见官网 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符）

update:实现父子组件数据双向绑定

父组件

<Child :childTitle="childTitle" @update:childTitle="childTitle = $event"/>

子组件

  props: {
    childTitle: String,
  },

this.$emit("update:childTitle", "新标题")

.sync实现父子组件数据双向绑定

.sync 修饰符为update:模式提供了一种简写方式。

注意事项：带 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)

父组件中的

<Child :childTitle="childTitle" @update:childTitle="childTitle = $event"/>

可以直接简写为

<Child :childTitle.sync="childTitle"/>

子组件不变

  props: {
    childTitle: String,
  },

this.$emit("update:childTitle", "新标题")

v-bind.sync实现父子组件数据双向绑定

若想实现多个数据的双向绑定，可以通过v-bind.sync绑定一个对象来实现（相比每个数据通过 .sync绑定，在书写上简化了很多）

注意事项：将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

父组件

<Child v-bind.sync="childInfo" />

childInfo: {
    name: "张三",
    age: 30
}

子组件

  props: {
    name: String,
    age: Number
  },

this.$emit("update:name", "新姓名");
this.$emit("update:age", 40);

v-model实现父子组件数据双向绑定

每个组件上只能有一个 v-model。

v-model 默认会占用名为 value 的 prop 和名为 input 的事件，以自定义二次封装的input 子组件为例：

父组件

<Child v-model="msg"/>

子组件

<input type="text" @input="changeMsg" />

props: {
    value: String,
},

changeMsg(e) {
    this.$emit("input", e.target.value);
},

通过model 可以自定义 v-model对应的prop名和事件名

父组件

<Child v-model="msg"/>

子组件

<input type="text" @input="changeMsg" />

model: {
  prop: "parentMsg",
  event: "changeMsg"
},
props: {
    parentMsg: String,
},

changeMsg(e) {
    this.$emit("changeMsg", e.target.value);
},