1. v-model
//使用
// data 中 model :false
// 子组件
DOM
export default {
props: {
value: { type: Boolean, default: false },
},
data() {
return {};
},
methods: {
ConfirmHandler() {
this.$emit("input", false);
this.$emit("Confirm");
},
CancelHandler() {
this.$emit("input", false);
this.$emit("Cancel");
}
}
};
解析:
等同于如下,model为@input的一个糖语法
text = e.target.value"/>
由此推算,子组件可以通过value获取父组件传来的值,可用$emit("input")触发父组件的方法input方法
2 .sync 修饰符
//使用
// data 中 model :false
// 子组件
DOM
export default {
props: {
visible: { type: Boolean, default: false },
},
data() {
return {};
},
methods: {
ConfirmHandler() {
this.$emit("update:visible", false);
this.$emit("Confirm");
},
CancelHandler() {
this.$emit("update:visible", false);
this.$emit("Cancel");
}
}
};
解析:
:visible="Visible"
@update:visible="newVisible => Visible = newVisible"
/>
ref 调用子组件方法
// 使用
methods:{
ChangeModel(){
this.$refs.Model.show()
}
}
//子组件
DOM
export default {
data() {
return {
model:false,
};
},
methods: {
show(){
this.model = true
},
ConfirmHandler() {
this.show()
this.$emit("Confirm");
},
CancelHandler() {
this.show()
this.$emit("Cancel");
}
}
};
在组件外通过Props控制显示隐藏
监听子组件的回调函数,通过Props控制子组件的显示隐藏。比较简单。
Ps:暂时发现四中办法,很多UI组件都是通过v-model来控制组件的显示隐藏,这种使用起来代码看着更美观。 状态修改,第一、二、四种都是在组件外修改的状态,第三种是在组件内部修改状态。