gpt4 book ai didi

javascript - 子组件的 v-model 和子组件 Vue 中的 v-model

转载 作者:数据小太阳 更新时间:2023-10-29 05:56:38 24 4
gpt4 key购买 nike

有没有办法简化这段代码?

该按钮还应更改子项的 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://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components


如果您真的想要表示组件本地值的东西,Vue 文档倾向于使用计算值而不是watchers(引用:https://v2.vuejs.org/v2/guide/computed.html#Watchers)。

这里的想法是创建一个 computed value with getter and 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>

关于javascript - 子组件的 v-model 和子组件 Vue 中的 v-model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52249365/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com