微语 微语:代码适合中午敲,早晚出BUG

vue 组件通信传递参数(子传父) 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>

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