Question

假设我有一个像这样的Vue组件：

 Vue.component('child-comp',{
    props:['name', 'val'],
    data: function(){
       return {
           picked: ''
       }
    },
    template: '<div><input type="radio" :name="name" :value="val" v-model="picked"><slot></slot></div>'
});

和父vue实例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
});

在HTML中：

<div id="app">
  <child-comp name="fruits" val="apple">Apple</child-comp>
  <child-comp name="fruits" val="banana">Banana</child-comp>
  <child-comp name="fruits" val="cherry">Cherry</child-comp>
  <p>{{ picked }}</p> <!-- this throws an error -->
</div>

如何将v-model属性picked从子组件传递到根实例。我知道的唯一方法是$emit来自子组件的事件，然后在根实例中捕获传递的数据。但正如您所看到的，要访问一个简单的属性，触发事件是一种过度杀伤力。如何在{{ picked }}

中访问<p>{{ picked }}</p>

Answer 1

如果您的child-comp是输入组件，则可以使用双向道具。这些工作类似于v-model，但您可以将它们与自定义组件一起使用。

<custom-input
  :value="something"
  @input="value => { something = value }">
</custom-input>

您可以详细了解here和there。另请参阅this主题。祝你好运！

Answer 2

这很简单：

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
   picked: 'apple'
  }
});

在孩子中：

Vue.component('child-comp',{
    props:['name'],
    template: '<div><input type="radio" :name="name" v-model="picked"><slot></slot></div>'
});

VueJS将v-model属性从子节点发送到父节点

2 个答案: