猿问
下载APP

vuejs更新子组件的父数据

vuejs更新子组件的父数据

我开始玩vuejs(2.0)。我构建了一个包含一个组件的简单页面。该页面有一个带有数据的Vue实例。在那个页面上,我注册并将组件添加到html。该组件有一个input[type=text]。我希望该值反映在父(主Vue实例)上。

如何正确更新组件的父数据?从父级传递绑定的prop并不好,并向控制台发出一些警告。他们的文档中有一些东西,但它不起作用。


白板的微信
浏览 55回答 3
3回答

一只萌萌小番薯

Vue 2.0中不推荐使用双向绑定,而是使用更多事件驱动的体系结构。一般来说,孩子不应该改变它的道具。相反,它应该是$emit事件,让父母回应这些事件。在您的特定情况下,您可以使用自定义组件v-model。这是一种特殊的语法,允许接近双向绑定的东西,但实际上是上述事件驱动架构的简写。你可以在这里阅读 - >&nbsp;https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events。这是一个简单的例子:Vue.component('child',&nbsp;{ &nbsp;&nbsp;template:&nbsp;'#child', &nbsp;&nbsp; &nbsp;&nbsp;//The&nbsp;child&nbsp;has&nbsp;a&nbsp;prop&nbsp;named&nbsp;'value'.&nbsp;v-model&nbsp;will&nbsp;automatically&nbsp;bind&nbsp;to&nbsp;this&nbsp;prop &nbsp;&nbsp;props:&nbsp;['value'], &nbsp;&nbsp;methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;updateValue:&nbsp;function&nbsp;(value)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$emit('input',&nbsp;value); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}});new&nbsp;Vue({ &nbsp;&nbsp;el:&nbsp;'#app', &nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;parentValue:&nbsp;'hello' &nbsp;&nbsp;}});<script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script><div&nbsp;id="app"> &nbsp;&nbsp;<p>Parent&nbsp;value:&nbsp;{{parentValue}}</p> &nbsp;&nbsp;<child&nbsp;v-model="parentValue"></child></div><template&nbsp;id="child"> &nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;v-bind:value="value"&nbsp;v-on:input="updateValue($event.target.value)"></template>文档说明了这一点<custom-input&nbsp;v-bind:value="something"&nbsp;v-on:input="something&nbsp;=&nbsp;arguments[0]"></custom-input>相当于<custom-input&nbsp;v-model="something"></custom-input>这就是为什么孩子的道具需要被命名为值,以及为什么孩子需要$发出一个名为的事件input。

慕标琳琳

从文档:在Vue.js中,父子组件关系可以概括为道具向下,事件向上。父母通过道具将数据传递给孩子,孩子通过事件向父母发送消息。让我们看看他们接下来的工作方式。如何传递道具以下是将props传递给子元素的代码:<div> &nbsp;&nbsp;<input&nbsp;v-model="parentMsg"> &nbsp;&nbsp;<br> &nbsp;&nbsp;<child&nbsp;v-bind:my-message="parentMsg"></child></div>如何发射事件HTML:<div&nbsp;id="counter-event-example"> &nbsp;&nbsp;<p>{{&nbsp;total&nbsp;}}</p> &nbsp;&nbsp;<button-counter&nbsp;v-on:increment="incrementTotal"></button-counter> &nbsp;&nbsp;<button-counter&nbsp;v-on:increment="incrementTotal"></button-counter></div>JS:Vue.component('button-counter',&nbsp;{ &nbsp;&nbsp;template:&nbsp;'<button&nbsp;v-on:click="increment">{{&nbsp;counter&nbsp;}}</button>', &nbsp;&nbsp;data:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;counter:&nbsp;0 &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}, &nbsp;&nbsp;methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;increment:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.counter&nbsp;+=&nbsp;1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$emit('increment') &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;},})new&nbsp;Vue({ &nbsp;&nbsp;el:&nbsp;'#counter-event-example', &nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;total:&nbsp;0 &nbsp;&nbsp;}, &nbsp;&nbsp;methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;incrementTotal:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.total&nbsp;+=&nbsp;1 &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}})

眼眸繁星

在子组件中:&nbsp;this.$emit('eventname', this.variable)在父组件中:<component&nbsp;@eventname="updateparent"></component>methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;updateparent(variable)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.parentvariable&nbsp;=&nbsp;variable &nbsp;&nbsp;&nbsp;&nbsp;} }
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答