组件传值---------- 2.逆向传值（vue2和vue3的区别）

2.逆向传值

 vue2:自定义事件$emit

  需要使用自定义事件来完成 $emit()

  1.在子组件中必须必须通过事件来触发自定义事件的抛出

    <!-- 1.通过事件调用一个自定义事件的创建 -->
      <button @click="fun()">点我逆向传值</button>

   fun(){
        // 2.在函数中使用$emit来创建一个自定义事件
        // this.$emit("自定义事件的名字",你要传递的数据)
        this.$emit("zipao",this.zitext)
    }

  2.父组件接收
     <Zicom @zipao="fun"/>
     // 有个形参  这个形参接收的就是刚才自定义事件的第二个参数
      fun(val){
          console.log(val)
      }
 ref 

  把ref绑定到子组件身上,那么就可以得到当前这个子组件的所有信息,包含他的data数据,从而完成了逆向传值.

 $chilren

  可以获取到当前组件的直接子组件（只是他的儿子组件。其他的孙子等组件不算），并以数组的形式返回（因为一个父组件可能有很多个子组件）。

 vue3:

 一、传统setup

  setup第二个参数context的emit属性也可以

  emit事件分发，用于子传父，如果子组件的数据想传递给父组件，就是用emit（逆向传值）

  子组件：
  <button @click="zifun">点我抛出事件</button>
  setup(props,context) {
    //    子组件通过context的emit方法进行数据的抛出
       let zifun=()=>{
           context.emit("zipao",'我是子组件的数据')
       }
        return {//不要忘了return
            zifun
        }
    },

   父组件：
   <Zc @zipao="fufun"/> 

  setup() {
    <!-- val就是子组件传递过来的数据 -->
    let fufun=(val)=>{
      console.log("子组件的数据",val)
    }
    return {
      fufun
    }
  },

 二、组合是api方式：

  1.自定义事件 defineEmits

    子组件--使用emits抛出自定义事件
    <button @click="fun()">点我逆向传值</button>

    import {defineEmits} from "vue"
    const emits = defineEmits(['xiaoming','xxxxx','xxxxx',.....n])

    let fun=()=>{
      emits('xiaoming',"我是子组件数据")
    }

    父组件--接受自定义事件：
    该引用组件的引进来使用
      <ZiView @xiaoming="fufun"/>

      let fufun=(val)=>{
        console.log("父组件",val)
      }

  2.ref
   但是vue3要使用ref逆向传值的话必须让子组件使用defineExports 来暴露自己的属性

  在vue3中如果直接给子组件绑定一个ref，那么是什么都拿不到的，ref方式传值：需要在子组件使用defineExpose（子组件暴露自己的属性）

注意 vue3没有$children