javascript - 子组件的 v-model 和子组件 Vue 内的 v-model
问题描述
有没有办法简化这段代码?
该按钮还应更改子项的 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)">
不data
,不watch
,就是这样。
见https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
如果您真的想要代表组件本地值的东西,Vue 文档倾向于使用计算值而不是观察者(参考:https ://vuejs.org/v2/guide/computed.html#Watchers )。
这里的想法是使用getter和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>
推荐阅读
- php - 如何使用 SQL 获取任何表的最后一个 id?
- rxjs - 使用 ReplaySubject 发送所有值
- excel - Excel UserForm:标签中的多行?
- java - 需要明确 Camel Timer 组件及时处理
- node.js - 如何使用 async-waterfall 修复 Nodejs api 中填充的猫鼬?
- amazon-web-services - 基于用户位置选择的具有 53 号路由地理位置的 AWS 服务器路由
- php - 未达到 PHP 内存限制但 OOM 杀手杀死了 php 脚本
- html - Bootstrap:选择下面的标签截断文本
- javascript - 三.js是什么原因导致暗疮以及如何修复它
- javascript - 通过 AJAX 重定向到 PHP 中的另一个页面