vuejs从子组件更新父数据

  • Z时代
  • 2024-01-10
  • 分类：问答

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

如何正确更新组件的父数据？从父级传递绑定的道具不好，并且会向控制台发出一些警告。他们的文档中有内容，但是没有用。

回答：

Vue

2.0中不赞成使用双向绑定，而是使用事件驱动的体系结构。通常，孩子不应该改变其道具。而是应该$emit发生事件，并让父级对这些事件做出响应。

在您的特定情况下，可以将自定义组件与一起使用v-model。这是一种特殊的语法，允许进行接近双向的绑定，但实际上是上述事件驱动架构的简写形式。

这是一个简单的示例：

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>

这就是为什么需要将子项上的prop命名为value的原因，以及子项需要$ emit一个名为的事件的原因input。

以上是 vuejs从子组件更新父数据 的全部内容， 来源链接： utcz.com/qa/407857.html

回到顶部