1.需求
vue的prop可以从父组件传递一个值到子组件,当子组件对传过来的值进行改变,父组件的值并不会改变,这显然不符合我的需求。我的需求是:当父组件的值改变,那么子组件的值也跟着改变;反过来,子组件改变值,父组件的值也跟着改变;可以理解为类似“双向绑定”
2.首先,定义一个子组件
<template>
<div>
<input type="text" v-model="label" />
</div>
</template>
<script>
export default {
name: 'MyInput',
props: {
//name为父组件传入的值,默认为空
name: {
type: String,
default: ''
}
},
data () {
return {
//子组件一般不要直接改变父组件传入的值,定义label,并把父组件传入的值(name)赋值给label
label: this.name
}
},
watch: {
//1.需求:子组件改变值,父组件的值也跟着改变
//监听label,当label改变,调用this.$emit
label (val) {
//告诉父组件name要更新,更新的值为val,也是label改变后的值
this.$emit('update:name', val)
},
//2.需求:当父组件的值改变,那么子组件的值也跟着改变
//监听name,当父组件要改变name值
name (val) {
//把name改变的值赋值给label
this.label = val
}
}
}
</script>
<style scoped>
</style>
3.父组件
<template>
<div>
<!--在父组件使用,接收子组件改变后的值-->
<my-input :name.sync="str"></my-input>
<!--另一种写法-->
<my-input :name="str" v-on:update:name="str = $event"></my-input>
</div>
</template>
<script>
import MyInput from '../../components/base/MyInput'
export default {
components: {
MyInput
},
data () {
return {
str: ''
}
}
}
</script>
<style scoped>
</style>