Vue $emit 子组件向父组件传递数据

$emit 子组件向父组件传递数据

说明：本文章代码截取自vite创建的文件中

1. 作用：子组件向父组件传递数据

2. 声明方式

• 数组式：emits: ['自定义事件名1','自定义事件名2',......]
• 对象式：

 emits: {
 	//key：自定义事件名
 	//value：校验函数，需要return一个布尔值，
 	//如果不需要校验，可以写null 
	'自定义事件名1': null,
	'自定义事件名2': ( ) => { 
			这是一个校验函数，需要return一个布尔值  
	},
		}

3. 使用方法

(1) 在子组件中声明自定义事件
emits: ['自定义事件名1','自定义事件名2',......]
(2) 给子组件绑定一个事件
<button @click="fn">点击传递数据</button>
(3) 触发子组件事件时，调用刚才声明的自定义事件
fn() { this.$emit("asd", "子组件传过去的value") }
(4) 父组件通过 v-on (缩写为 @) 来监听事件
<child @asd="chang">{{ message }}</child>
(5) 当父组件监听到子组件的自定义事件asd触发时，触发监听事件里的回调函数
chang(value) { this.message = value }

示例

子组件(child.vue)

<template>
    <button @click="fn">点击传递数据</button>
</template>
<script>
export default {
    //注册自定义事件
    //方法一：数组式
    // emits: ['asd']
    // 方法二：对象式
    //key：自定义事件名
    //value：回调函数(用于校验事件,要return一个布尔值表示是否通过)
    emits: {
        'asd': null
    },

    //声明方法
    methods: {
        fn() {
            //触发自定义事件：this.$emit("自定义事件名", "子组件要传递的数据")
            this.$emit("asd", "子组件传过去的value")
        }
    }
}
</script>
<style></style>

父组件(app.vue)

<template>
  <!-- 监听子组件事件： @asd="chang" -->
  <child @asd="chang">{{ message }}</child>
  <div>{{ message }}</div>
</template>
<script>
import child from './child.vue'
export default {
  //局部注册组件
  components: {
    child
  },

  //声明状态
  data() {
    return {
      message: "父组件的数据"
    }
  },

  //声明方法
  methods: {
    //value：子组件传递过来的数据
    chang(value) {
      this.message = value
    }
  }
}
</script>
<style></style>