v-model和computed结合使用 vue
v-model结合computed使用有2种情况(项目中遇到的情况)
-
一种情况是computed关联的是组件内部的data里的数据,然后使用v-model绑定computed数据,这种情况computed的数据是可以改变的
-
一种情况是computed关联的是props里的数据,然后使用v-model绑定computed数据,这种情况computed的数据是不可以改变的
注意:computed必须在页面(view视图)中使用,才会监听到数据得变化,并且在computed中不能使用$refs,获取不到ref数据
<template>
//data绑定的输入框数据可以改变
<el-input v-model='inputData'></el-input>
//通过prop传递数据的输入框数据不可以改变
<el-input v-model='inputProp'></el-input>
</template>
<script>
export default {
props: {
wordProp: {
type: 'String',
default: '传递数据'
}
}
data() {
return {
wordData:'data数据'
}
},
computed: {
//data里的数据
inputData: {
get() {
return this.wordData
},
set(val) {
this.wordData= val
}
},
//props传递的数据,
inputProp: {
get() {
return this.wordProp
},
set(val) {
//实现prop双向改变,子组件改变的数据可以传递给父组件
this.$emit('update:wordProp', val)
}
},
}
}
</script>
总结:computed结合v-model使用,最好是使用data数据,不要使用prop数据