本文详细介绍了Vue中组件交互的三种方式：v-model、sync修饰符以及通过ref调用子组件方法。v-model作为语法糖用于双向数据绑定，sync修饰符用于更新父组件传递的prop值，而ref则允许直接调用子组件的方法。通过这些方法，开发者可以灵活地控制组件的显示和隐藏，以及实现父子组件间的通信。
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来控制组件的显示隐藏，这种使用起来代码看着更美观。 状态修改，第一、二、四种都是在组件外修改的状态，第三种是在组件内部修改状态。
扫一扫
3145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
