uniapp中$emit的使用方法

1. 基本原理

子组件可以借助 $emit 触发一个自定义事件，父组件监听这个自定义事件，当事件触发时，父组件执行对应的处理函数。

2. 基本语法

在子组件里，使用 this.$emit('事件名', 参数) 触发自定义事件，参数是可选的。
在父组件中，通过 @事件名="处理函数" 监听子组件触发的事件。

3. 简单示例

子组件（Child.vue）

<template>
    <button @click="sendMessage">发送消息给父组件</button>
</template>

<script>
export default {
    methods: {
        sendMessage() {
            this.$emit('customEvent', '这是来自子组件的消息');
        }
    }
}
</script>

在这个子组件中，定义了一个按钮，点击按钮时调用 sendMessage 方法，该方法使用 $emit 触发名为 customEvent 的自定义事件，并传递了一个字符串参数。

父组件（Parent.vue）

<template>
    <view>
        <child @customEvent="handleCustomEvent"></child>
        <text>{{ messageFromChild }}</text>
    </view>
</template>

<script>
import Child from './Child.vue';

export default {
    components: {
        Child
    },
    data() {
        return {
            messageFromChild: ''
        };
    },
    methods: {
        handleCustomEvent(message) {
            this.messageFromChild = message;
        }
    }
}
</script>

在父组件中，引入并使用了子组件 Child，通过 @customEvent="handleCustomEvent" 监听子组件触发的 customEvent 事件。当事件触发时，调用 handleCustomEvent 方法，该方法接收子组件传递的参数，并将其赋值给 messageFromChild 变量。

4. 携带多个参数

子组件可以传递多个参数给父组件。

子组件（Child.vue）

<template>
    <button @click="sendData">发送多个参数</button>
</template>

<script>
export default {
    methods: {
        sendData() {
            this.$emit('multiParamsEvent', '参数1', 123);
        }
    }
}
</script>

父组件（Parent.vue）

<template>
    <view>
        <child @multiParamsEvent="handleMultiParamsEvent"></child>
    </view>
</template>

<script>
import Child from './Child.vue';

export default {
    components: {
        Child
    },
    methods: {
        handleMultiParamsEvent(param1, param2) {
            console.log('接收到的参数1:', param1);
            console.log('接收到的参数2:', param2);
        }
    }
}
</script>

在这个例子中，子组件触发 multiParamsEvent 事件时传递了两个参数，父组件的处理函数接收这两个参数并进行处理。

5. 动态事件名

在某些场景下，事件名可以是动态的。

子组件（Child.vue）

<template>
    <button @click="sendDynamicEvent">发送动态事件</button>
</template>

<script>
export default {
    methods: {
        sendDynamicEvent() {
            const eventName = 'dynamicEvent';
            this.$emit(eventName, '动态事件的数据');
        }
    }
}
</script>

父组件（Parent.vue）

<template>
    <view>
        <child @dynamicEvent="handleDynamicEvent"></child>
    </view>
</template>

<script>
import Child from './Child.vue';

export default {
    components: {
        Child
    },
    methods: {
        handleDynamicEvent(data) {
            console.log('接收到的动态事件数据:', data);
        }
    }
}
</script>

6. 注意事项

• 事件名大小写：在 HTML 模板中，事件名会自动转换为小写，因此建议使用短横线命名法（如 custom-event）来定义事件名。
• 单向数据流：虽然 $emit 用于子组件向父组件传递数据，但要遵循单向数据流原则，避免在子组件中直接修改父组件的数据。