v-model和computed结合使用 vue

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数据