vue中 emit 传值

1.app.vue文件

<template>
  <div>
    <h1>{{ msg }}</h1>
    <Child @yyds="onHandle" />
  </div>
</template>

<script setup >
import Child from './Child.vue'
import { ref } from 'vue';

let msg =ref('')

const onHandle=(data)=>{
  msg.value=data.value
}

</script>

<!-- vue2 -->
<!-- <script>
import Child from './Child.vue'
export default {
  components:{
    Child,
  },
  data() {
    return {
      msg:''
    }
  },
  methods: {
    onHandle(data,num){
      console.log('获取child 传递的值',data,num);
    }

  },
}
</script> -->

<style scoped>

</style>

2.Child.vue文件            

        

<template>
<button @click="e=>handle()"></button>
</template>

<--vue3.x -->
<script setup>
import { ref,defineEmits } from 'vue';

let msg =ref('child 中内容')
/**
 * defubeEmites()  作用定义自定义事件
 * 参数：数组，数组元素是自定义事件名
 * 返回：返回触发事件的函数
 */
let eimits =defineEmits(['yyds'])
/**
 * emits（）  作用触发自定义事件
 * 参一：defineEmits中定义的事件名
 * 参二：触发事件处理函数传入的实参
 */
const handle=()=>{
  eimits('yyds',msg,12345)
}

</script>



<--vue2.x -->
<!-- <script>
export default {
  setup () {
    return {
      msg:"child 中内容"
    }
  },
  methods: {
    handle(){
      /**
       * $emit()
       * 作用：触发自定义事件
       * 参一：事件名，
       * 参二：事件处理函数传入的实参
       */
      this.$emit('yyds',this.msg)
    }
  },
}
</script> -->


<style  scoped>

</style>

# emit

- 1.在定义组件的时候：定义自定义事件名

- 2.使用组件时，v-on绑定自定义事件

- 3.在定义组件中使用 $emit() 触发自定义事件绑定的函数，并传入实参

 

## 用途

- 1.在封装组件时，将组件内部的数据提供给组件外部

- 2.给组件外部提供钩子函数（一些自定义事件）