有没有办法简化这段代码？
该按钮还应该更改子级的 localValue。
Vue.component('my-input', {
template: `
<div>
<b>My Input:</b> <br>
localValue: {{ localValue }} <br>
<input v-model="localValue">
</div>
`,
props: ['value'],
data() {
return { localValue: this.value }
},
watch: {
value () {
this.localValue = this.value
},
localValue () {
this.$emit('input', this.localValue)
}
}
})
new Vue({
el: '#app',
data: () => ({
parentValue: 'Inital value'
}),
methods: {
change () {
this.parentValue = 'Changed value'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<my-input v-model="parentValue"></my-input>
<button @click="change">Change</button><br>
parentValue: {{ parentValue }}
</div>
当我需要这样做时，我总是会遇到困难。
我将非常感谢您的帮助！
如果您避免使用v-model在您的自定义表单组件中，您实际上只需要
<b>My Input:</b> <br>
localValue: {{ value }} <br>
<input :value="value" @input="$emit('input', $event.target.value)">
No data, no watch， 就是这样。
See https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components
如果你确实想要代表组件本地值的东西，Vue 文档更倾向于使用计算值而不是watchers (ref: https://v2.vuejs.org/v2/guide/compulated.html#Watchers https://v2.vuejs.org/v2/guide/computed.html#Watchers).
这里的想法是创建一个计算值getter and setter https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter以促进简化的单向数据流。
Vue.component('my-input', {
template: `<div><b>My Input:</b> <br>localValue: {{ localValue }} <br><input v-model="localValue"></div>`,
props: ['value'],
computed: {
localValue: {
get () {
return this.value
},
set (value) {
this.$emit('input', value)
}
}
}
})
new Vue({
el: '#app',
data: () => ({
parentValue: 'Inital value'
}),
methods: {
change () {
this.parentValue = 'Changed value'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<my-input v-model="parentValue"></my-input>
<button @click="change">Change</button><br>
parentValue: {{ parentValue }}
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
