1.使用v-model
父组件使用v-model属性向子组件传值
<cmbtpop v-model="show" :name="entity.name" ></cmbtpop>
子组件使用value属性接受参数(当属性名称value被占用时可以使用model属性修改接受v-model参数的属性名称,具体可参考model的api)
然后使用$emit方法更新父组件v-model参数
<div :show="newValue" @click="changeValue" >{{name}}</div> export default { name: 'cmbtpop', data() { return { newValue : this.value,//使用newValue 控制子组件 }; }, props: { value:{ type:Boolean, default: false } , name: String }, watch:{ value:function(){ this.newValue = this.value;//父组件的show值改变时重新控制子组件 } }, methods:{ changeValue(){ this.newValue = !this.newValue; this.$emit('input', this.newValue) // 父组件中的show会被更改成newValue值 } } }
2.使用同步后缀sync
在父组件的传参属后加入.sync标明该属性同步
在子组件中使用$emit方法更新父组件同步属性
<cmbtpop show.sync="show"></cmbtpop> //子组件 export default { props: { show: { type: Boolean, default: false } }, methods:{ changeValue(){
this.newValue = !this.newValue; this.$emit('update:show', this.newValue) // 父组件中的show会被更改成newValue值 }
} }
称