我开始玩vuejs(2.0)。 我构建了一个包含一个组件的简单页面。 该页面有一个带有数据的Vue实例。 在那个页面上，我注册并将组件添加到html中。 组件有一个输入[type=text]。我希望该值反映在父实例(主Vue实例)上。
如何正确地更新组件的父数据? 从父对象传递绑定道具是不好的，会向控制台抛出一些警告。他们的文件里有一些东西，但不管用。
当前回答
我认为这个可以达到目的:
@change=“$emit（变量）”
其他回答
我认为这个可以达到目的:
@change=“$emit（变量）”
我同意上述事件发射和v模型的答案。但是，我认为我应该发布我所发现的关于具有多个表单元素的组件，这些元素想要发射回它们的父元素，因为这似乎是谷歌返回的第一批文章之一。
我知道这个问题指定了单个输入，但这似乎是最接近的匹配，并且可以为使用类似vue组件的人节省一些时间。此外，还没有人提到.sync修饰符。
据我所知，v模型解决方案只适合一个输入返回到它们的父。我花了一些时间寻找它，但Vue(2.3.0)文档确实展示了如何将发送到组件中的多个道具同步回父组件(当然是通过emit)。
它被恰当地称为.sync修饰符。
以下是文档的内容:
在某些情况下，我们可能需要对道具进行“双向绑定”。 不幸的是，真正的双向绑定会产生维护问题， 的源可以使父组件发生变异 这种突变在父母和孩子身上都很明显。 这就是为什么我们建议以模式发出事件的原因 更新:myPropName。例如，在一个假设的组件中 标题道具，我们可以传达分配新值的意图 :
this.$emit('update:title', newTitle)
然后家长就可以听了 并更新本地数据属性(如果需要的话)。为 例子:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
为了方便起见，我们用.sync修饰符提供了这种模式的简写:
<text-document v-bind:title.sync="doc.title"></text-document>
你也可以通过一个对象同时同步多个对象。在这里查看文档
更简单的方法是使用这个。$emit
Father.vue
<template>
<div>
<h1>{{ message }}</h1>
<child v-on:listenerChild="listenerChild"/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Father",
data() {
return {
message: "Where are you, my Child?"
};
},
components: {
Child
},
methods: {
listenerChild(reply) {
this.message = reply;
}
}
};
</script>
Child.vue
<template>
<div>
<button @click="replyDaddy">Reply Daddy</button>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
replyDaddy() {
this.$emit("listenerChild", "I'm here my Daddy!");
}
}
};
</script>
完整示例:https://codesandbox.io/s/update-parent-property-ufj4b
另一种方法是将setter的引用作为道具从父组件传递给子组件，类似于React中的做法。 比如，你在父组件上有一个updateValue方法来更新值，你可以这样实例化子组件:<child:updateValue="updateValue"></child>。然后在子对象上，你将有一个对应的prop: props: {updateValue: Function}，并在模板中，当输入发生变化时调用该方法:<input @input="updateValue($event.target.value)">。
在子组件中:
this.$emit('eventname', this.variable)
在父组件中:
<component @eventname="updateparent"></component>
methods: {
updateparent(variable) {
this.parentvariable = variable
}
}
