Vue 两种方式的 prop 绑定

Question

以下是我当前的结构（不起作用）。

父组件：

<template>
<field-input ref="title" :field.sync="title" />
</template>

<script>
import Field from './input/Field'
export default {
  components: {
    'field-input': Field
  },
  data() {
    return {
      title: {
        value: '',
        warn: false
      }
    }
  }
}
</script>

子组件：

<template>
<div>
  <input type="text" v-model="field.value">
  <p v-bind:class="{ 'is-invisible' : !field.warn }">Some text</p>
</div>
</template>

<script>
export default {
  props: ['field']
}
</script>

要求是：

• 如果 parent 的数据 title.warn 在 parent 中发生变化，则应该更新 child 的 class 绑定 (field.warn)。
• 如果孩子的<input> 已更新（field.value），则应更新父母的title.value。

实现这一目标的最简洁有效的解决方案是什么？

Answer 1

不要将子组件的<input> 绑定到父组件的title.value（如<input type="text" v-model="field.value">）。这是known bad practice，能够让您的应用程序的数据流更难理解。

要求是：

• 如果 parent 的数据 title.warn 在 parent 中发生变化，则应该更新 child 的 class 绑定 (field.warn)。

这很简单，只需创建一个 warn 属性并将其从父级传递给子级。

父母（将道具传递给孩子）：

<field-input ref="title" :warn="title.warn" />

子/模板（使用道具--仅阅读）：

<p v-bind:class="{ 'is-invisible' : !warn }">Some text</p>

Child/JavaScript（声明 prop 及其预期类型）：

export default {
  props: {warn: Boolean}
}

请注意，在模板中它是!warn，而不是!title.warn。此外，您应该将warn 声明为Boolean 属性，因为如果您不这样做，父级可能会使用会产生意外结果的字符串（例如<field-input warn="false" />）（!"false" 实际上是false，而不是@987654343 @)。

• 如果孩子的<input> 被更新（field.value），那么父母的title.value 应该被更新。

您在这里有几个可能的选项 (like using .sync in a prop)，但我认为在这种情况下最干净的解决方案是在父级上创建一个 value prop and use v-model。

父母（使用v-model绑定道具）：

<field-input ref="title" v-model="title.value" />

子/模板（使用道具作为初始值并在它发生变化时发出input事件）：

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

Child/JavaScript（声明 prop 及其预期类型）：

export default {
  props: {value: String}
}

Click here for a working DEMO 将这两种解决方案放在一起。

Answer 2

有几种方法可以实现双向数据绑定：

1. 使用props on components
2. 使用v-model attribute
3. 使用sync modifier
4. 使用Vuex

对于双向绑定，请记住，它可能会导致难以维护的突变链， 引用自文档：

不幸的是，真正的双向绑定会产生维护问题，因为子组件可以使父组件发生变异，而该变异的来源在父组件和子组件中都不明显。

以下是可用方法的一些详细信息：

1.) 在组件上使用道具

使用 props 进行双向绑定是not usually advised，但可能的是，通过传递一个对象或数组，您可以更改该对象的属性，并且它将在子级和父级中观察到，而 Vue 不会在控制台中打印警告。

每次父组件更新时，子组件中的所有props 组件将使用最新值刷新。这意味着你 不应尝试改变子组件内的道具

道具易于使用，是解决最常见问题的理想方法。
由于how Vue observes changes，所有属性都需要在对象上可用，否则它们将不会是反应性的。 如果在 Vue 完成使它们可观察之后添加任何属性，则必须使用 'set'。

 //Normal usage
 Vue.set(aVariable, 'aNewProp', 42);
 //This is how to use it in Nuxt
 this.$set(this.historyEntry, 'date', new Date());

该对象对组件和父级都是响应式的：

如果您将对象/数组作为道具传递，它会自动进行双向同步 - 更改 子，它在父中被改变了。

如果您传递简单的值（字符串、数字） 通过道具，您必须明确使用.sync modifier

引自 --> https://stackoverflow.com/a/35723888/1087372

2.) 使用 v-model 属性

v-model 属性是一种语法糖，可以在父子节点之间轻松进行双向绑定。它与同步修饰符的作用相同，只是它使用特定的道具和特定的事件进行绑定

这个：

 <input v-model="searchText">

和这个是一样的：

 <input
   v-bind:value="searchText"
   v-on:input="searchText = $event.target.value"
 >

prop 必须是 value 且 event 必须是 input

3.) 使用同步修饰符

sync 修饰符也是语法糖，与 v-model 的作用相同，只是 prop 和 event 名称由所使用的任何内容设置。

在父级中可以如下使用：

 <text-document v-bind:title.sync="doc.title"></text-document>

可以从子级发出事件以通知父级任何更改：

 this.$emit('update:title', newTitle)

4.) 使用 Vuex

Vuex 是一个state manager，可以从每个组件访问。 可以订阅更改。

通过使用 Vuex 存储，可以更轻松地查看数据突变的流动，并且它们是明确定义的。通过使用vue developer tools，可以轻松调试和回滚所做的更改。

这种方法需要更多样板，但如果在整个项目中使用，它会成为一种更清晰的方式来定义如何进行更改以及从何处进行更改。

见getting started guide