Vue 2.0中不赞成使用双向绑定,而是使用事件驱动的体系结构。通常,孩子不应该改变其道具。而是应该$emit
发生事件,并让父级对这些事件做出响应。
在您的特定情况下,可以将@R_301_2410@组件与一起使用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
。