vuejs 从子组件更新父数据 [英] vuejs update parent data from child component
问题描述
我开始使用 vuejs (2.0).我构建了一个简单的页面,其中包含一个组件.该页面有一个包含数据的 Vue 实例.在该页面上,我注册并将组件添加到 html.该组件有一个 input[type=text]
.我希望该值反映在父级(主 Vue 实例)上.
如何正确更新组件的父数据?从父级传递绑定道具并不好,并向控制台抛出一些警告.他们的文档中有一些东西,但它不起作用.
双向绑定在 Vue 2.0 中已被弃用,转而使用更加事件驱动的架构.一般来说,一个孩子不应该改变它的道具.相反,它应该 $emit
事件并让父响应这些事件.
在您的特定情况下,您可以使用带有 v-model
的自定义组件.这是一种特殊的语法,允许接近双向绑定,但实际上是上述事件驱动架构的简写.你可以在这里阅读 -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.
这是一个简单的例子:
Vue.component('child', {模板:'#child',//孩子有一个名为'value'的道具.v-model 会自动绑定到这个 prop道具:['价值'],方法: {更新值:函数(值){this.$emit('input', value);}}});新的 Vue({el: '#app',数据: {父值:'你好'}});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></脚本><div id="应用程序"><p>父值:{{parentValue}}</p><child v-model="parentValue"></child>
<模板 id="子"><input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)"></template>
文档说明
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>
相当于
<custom-input v-model="something"></custom-input>
这就是为什么child上的prop需要被命名为value,以及为什么child需要$emit一个名为input
的事件.
I'm starting to play with vuejs (2.0).
I built a simple page with one component in it.
The page has one Vue instance with data.
On that page I registered and added the component to html.
The component has one input[type=text]
. I want that value to reflect on the parent (main Vue instance).
How do I correctly update the component's parent data? Passing a bound prop from the parent is not good and throws some warnings to the console. They have something in their doc but it is not working.
Two-way binding has been deprecated in Vue 2.0 in favor of using a more event-driven architecture. In general, a child should not mutate its props. Rather, it should $emit
events and let the parent respond to those events.
In your specific case, you could use a custom component with v-model
. This is a special syntax which allows for something close to two-way binding, but is actually a shorthand for the event-driven architecture described above. You can read about it here -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.
Here's a simple example:
Vue.component('child', {
template: '#child',
//The child has a prop named 'value'. v-model will automatically bind to this prop
props: ['value'],
methods: {
updateValue: function (value) {
this.$emit('input', value);
}
}
});
new Vue({
el: '#app',
data: {
parentValue: 'hello'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<p>Parent value: {{parentValue}}</p>
<child v-model="parentValue"></child>
</div>
<template id="child">
<input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>
The docs state that
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>
is equivalent to
<custom-input v-model="something"></custom-input>
That is why the prop on the child needs to be named value, and why the child needs to $emit an event named input
.
这篇关于vuejs 从子组件更新父数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!