【vue】emit 的理解与使用

介绍

• $emit 是 Vue 组件实例中的一个方法，用来触发自定义事件，并向父组件传递信息
• 它接受两个参数：事件名称和可选参数

  this.$emit('事件名称', 参数);
  

流程

示例

效果

• 触发前
  
• 触发后
  

父组件

• 父组件使用子组件 Son
• 父组件给子组件绑定了 emit 事件 setTextEvent
• setTextEvent 触发后，父组件会调用 setText 进行处理

<template>
    <h3>父组件</h3>
    <p>
        {{ text }}
    </p>
    <Son @setTextEvent="setText">
    </Son>
</template>

<script>
import Son from "./Son.vue";

export default {
    name: "Father",
    components: {
        Son
    },
    data() {
        return {
            text: ''
        }
    },
    methods: {
        setText(text) {
            this.text = text;
        }
    }
}
</script>

子组件

• 放置了一个按钮，点击触发 setText，这里的 setText 和父组件的 methods 中的 setText 没有任何关系，只是名字一样
• setText 中触发 setTextEvent emit 事件，并传递参数 hello

<template>
    <button @click="setText">子组件触发 emit</button>
</template>
<script>

export default {
    name: "Son",
    methods: {
        setText() {
        	// 父组件绑定的 emit 事件是 setTextEvent
            this.$emit('setTextEvent', 'hello')
        }
    }
}
</script>