为了账号安全,请及时绑定邮箱和手机立即绑定

vuejs更新子组件的父数据

/ 猿问

vuejs更新子组件的父数据

白板的微信 2019-08-17 15:51:56

vuejs更新子组件的父数据

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

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


查看完整描述

3 回答

?
一只萌萌小番薯

Vue 2.0中不推荐使用双向绑定,而是使用更多事件驱动的体系结构。一般来说,孩子不应该改变它的道具。相反,它应该是$emit事件,让父母回应这些事件。

在您的特定情况下,您可以使用自定义组件v-model。这是一种特殊的语法,允许接近双向绑定的东西,但实际上是上述事件驱动架构的简写。你可以在这里阅读 - > https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

这是一个简单的例子:

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>

文档说明了这一点

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

相当于

<custom-input v-model="something"></custom-input>

这就是为什么孩子的道具需要被命名为值,以及为什么孩子需要$发出一个名为的事件input


查看完整回答
反对 回复 2019-08-17
?
慕标琳琳

文档

在Vue.js中,父子组件关系可以概括为道具向下,事件向上。父母通过道具将数据传递给孩子,孩子通过事件向父母发送消息。让我们看看他们接下来的工作方式。


如何传递道具

以下是将props传递给子元素的代码:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child></div>

如何发射事件

HTML:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter></div>

JS:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },})new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }})


查看完整回答
反对 回复 2019-08-17
?
眼眸繁星

在子组件中: this.$emit('eventname', this.variable)

在父组件中:

<component @eventname="updateparent"></component>methods: {
    updateparent(variable) {
        this.parentvariable = variable
    }
}


查看完整回答
反对 回复 2019-08-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信