«

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>

@自定义函数名 = "自定义的函数" 这里挂在的什么函数名,子组件传递的时候,就要写什么函数名,"="是自定义的函数,可以通过回调来接收传递的参数

vue 子传父

推荐阅读:


扫描二维码,在手机上阅读