场景:自己封装的插件需要点击子组件的按钮去操作父组件的数据

方法
子组件代码

1
2
3
4
5
6
7
8
9
10
<template>
<child @click="close"></child>
</template>
<script>
methods: {
close() {
this.$emit('close',true); //触发close方法,true为向父组件传递的数据
}
}
</script>

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<parent @close="toClose" :msg="msg"></parent> //监听子组件触发的close事件,然后调用toClose方法
<div>{{ msg }}</div>
</template>
<script>
data () {
return {
msg: false,
}
},
methods: {
toClose(msg) {
this.msg = msg;
}
}
</script>

拓展:vue emit 有多个参数该如何写

1
this.$emit('transferName', {name: this.name, dev: this.des})

父组件
HTML代码

1
<child @transferName="getNameAndDes"></child>

JS代码

1
2
3
4
getNameAndDes(msg) {
this.name = msg.name
this.dev = msg.dev
}

转载请保持原始链接

原始链接: https://ru23.com/note/4859b5d8.html