1. v-model

//使用

// data 中 model :false

// 子组件

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

// 子组件

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()

}

}

//子组件

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来控制组件的显示隐藏，这种使用起来代码看着更美观。 状态修改，第一、二、四种都是在组件外修改的状态，第三种是在组件内部修改状态。