背景:
实现组件之间子组件向父组件传递数据,该如何做到呢?
上代码:
子组件:
<template>
<div>
<button @click="click">点击</button>
</div>
</template>
<script>
export default{
methods:{
click(){
let a = "123"
let b = "456"
this.$emit("childClick",a,b)
}
}
}
</script>
<style>
</style>
子组件模板中,只有一个button按钮,当按下这个按钮之后,触发操作,后台将通过console输出子组件向父组件传递值。$emit 绑定一个自定义事件childClick事件,当这个这个语句被执行到的时候,就会将参数 a,b传递给父组件,父组件通过@event监听并接收参数。这里的自定义事件可以任意命名,emit传递的参数 可以是多个,类型不限制。
父组件:
<template>
<div>
<Son @childClick="parentClick"></Son>
</div>
</template>
<script>
import Son from './son.vue'
export default{
components:{
Son
},
methods:{
parentClick(a,b){
console.log("a,b=>",a,b);
}
}
}
</script>
<style>
</style>
父组件中, 引入子组件Son,并在模板中设置子组件, @childClick表示子组件的方法(这时要和子组件中的需要emit的方法一致)。在父组件中childClick 方法被触发时,就会调用父组件中定义的函数parentClick,并向其中传递两个参数a,b。这时,我们需要注意,子组件中emit方法中包含两个参数a,b;那么我们在父组件中,可以只获取到a,或者都获取到。但如果parentClick 中存在第三个参数c,因为子组件中只传递了两个值,所以,c是个空值。