vue 组件通信传递参数(子传父)
时间:2023-6-20 11:39 作者:小诸葛 分类: Vue 正在检查是否收录...
1.定义子组件 MyButton.vue 用$emit方法传递 里面2个值,参数一:挂载到自定义组件上的函数名,第二个是要传递的值
this.$emit("axxx", data)
<template>
<div>
<button @click="btn">按钮</button>
</div>
</template>
<script>
export default {
data: () => ({
data: "子传父"
}),
methods: {
btn() {
this.$emit("axxx", data)
}
}
}
</script>
2.父组件接收
在父组件上自定义函数名
<template>
<div>
<mybutton @axxx="goto"/>
</div>
</template>
<script>
export default {
data: () => ({
data: "子传父"
}),
methods: {
goto(val) {
console.log(val);
},
}
</script>
@自定义函数名 = "自定义的函数" 这里挂在的什么函数名,子组件传递的时候,就要写什么函数名,"="是自定义的函数,可以通过回调来接收传递的参数
推荐阅读:
扫描二维码,在手机上阅读