【Vue2】组件通信 之 自定义事件

自定义事件

自定义事件，用于实现子组件到父组件的数据传递

1. 在父组件中，给子组件标签元素设置自定义事件 <子组件名 @事件名="方法名" /> 【监听事件函数】
2. 在子组件中，通过 [this.]$emit("事件名", 数据) 触发自定义事件，并传递数据
   传递多个 数据 时，用 , 隔开 【触发事件函数、传数据】
3. 销毁当前子组件的自定义事件：（在子组件中调用） 【关闭事件】
   单个自定义事件：[this.]$off("事件名") - 直接传入事件名
   多个自定义事件：[this.]$off(["事件名1", "事件名2"]) - 以数组的形式传入多个事件名
   所有自定义事件：[this.]$off() - 啥也不传

• 在父组件中，事件名 可以为 camelCase / kebab-case 形式
  在父组件中给子组件标签元素设置自定义事件 @viewInfo="faFun" / @view-info="faFun"
  在子组件中都可通过 this.$emit("viewInfo") 触发

<template>
    <div>
        <h2>{{ faMsg }}</h2>
        <!-- 设置自定义事件，绑定父组件中的方法 -->
        <Son @get_son="parentFun" />
        <!-- 如果只需触发一次，可以添加事件修饰符 .once -->
        <!-- <Son @get_son.once="parentFun" /> -->
    </div>
</template>

<script>
import Son from './components/Son.vue';
export default {
    name: 'App',
    data() {
        return { faMsg: 'Father' };
    },
    components: { Son },
    methods: {
        parentFun(val) {
            this.faMsg += val;
        },
    },
};
</script>

<template>
    <div>
        <h2>Son</h2>
        <!-- 通过 $emit 触发自定义事件，并传入子组件的数据 -->
        <button @click="$emit('get_son', sonMsg)">点击将子组件的数据传递给父组件</button>
        <!-- 通过 $off 销毁自定义事件 -->
        <button @click="$off('get_son')">点击销毁自定义事件</button>
    </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return { sonMsg: 'Son' };
    },
};
</script>

将原生事件绑定到组件

• 给 [原生 DOM 元素] 绑定事件，能正常触发

• 给 [组件标签元素] 绑定的事件，默认是自定义事件
  就是说，当自定义事件的事件名与 JS 中原有的事件名一样时，原 JS 事件会失效

  此时，可以使用事件修饰符 .native，表示绑定原始事件

<template>
    <div>
        <!-- 给 [原生 DOM 元素] 绑定事件 -->
        <h2 @click="show">Father</h2>
        <!-- 给 [组件标签元素] 绑定事件 -->
        <Son @click="show" />
    </div>
</template>

<script>
import Son from './components/Son.vue';
export default {
    name: 'App',
    methods: {
        show(val) {
            console.log('val', val);
        },
    },
    components: { Son },
};
</script>

<template>
    <div>
        <h2 @click="$emit('click', 'sonMsg')">Son</h2>
    </div>
</template>

<script>
export default { name: 'Son' };
</script>

此时，点击 Father，val 是事件对象；点击 Son，val 是 sonMsg

• 如果想使用 JS 的原事件，可在绑定事件时设置 [自定义事件修饰符 .native]
  其实是给子组件的根节点绑定了事件，利用到 [事件委派]

<template>
    <div>
        <!-- 给 [原生 DOM 元素] 绑定事件 -->
        <h2 @click="show">Father</h2>
        <!-- 给 [组件标签元素] 绑定事件 -->
        <Son @click.native="show" />
    </div>
</template>