VUE简单的同父兄弟组件传值，父子组件传值及VUE3的$emit替代

父组件传递数据到子组件：

父组件值-->props-->子组件

<!--父组件引用子组件-->
<father-component :子组件数据接收名="父组件数据传递名"></father-component>



<!--子组件-->
<script>

props:{
  子组件数据接收名:类型
},




//vue3 写法
defineProps({
  子组件数据接收名:类型
})

</script>

子组件传递数据到父组件：

子组件emit-->@事件-->父组件

<!--父组件引用子组件-->
<father-component @子组件方法="父组件方法"></father-component>

<script>
  methods:{

    ...............

    父组件方法(event){
      //代码段
      console.log(event)
    },

    ...............

  },



//vue3写法
const 父组件方法 = (event)=>{
  //代码段
  console.log(event)
}

</script>



<!--子组件-->
<script>
  methods:{
    子组件方法(){
      this.$emit('子组件方法', 值) 
      ///传多个值
      this.$emit("子组件方法",[值,值,值])
      this.$emit("子组件方法",{
        键:值,
        键:值,
      })
      let arr = [a,b,c,d,e]
      this.$emit("子组件方法",arr)
    }
  }


//vue3写法
// 引入defineEmits
import {defineProps,defineEmits} from 'vue';


// 使用defineEmits注册一个自定义事件
// 如存在多个监听事件则为 defineEmits(['方法名1','方法名2','方法名3'])
const emit = defineEmits(["子组件方法"])

const 子组件方法 = () => {
  emit("子组件方法", 需要传递的值与原来传值方法一样)
}



</script>

同父兄弟组件传值：

父组件：

<template>
<div id="millia">
<!--导航子组件-->
<top-nav @brotherPopShow="fatherPopShow"></top-nav>
<!--@brotherPopShow子组件接收方法名-->
<!--fatherPopShow父组件方法-->

<!--  其他代码 -->

<!--弹出层子组件-->
<pop-div :popShow="popShow" @popClose="fahterPopClose"></pop-div>
<!--:popShow子组件props接收数据-->
<!--popShow父组件data中的数据-->
<!--@popClose子组件接收方法名-->
<!--fahterPopClose父组件方法-->

</div>
</template>
<script>
import TopNav from '@/components/TopNav.vue';
import PopDiv from '@/components/PopDiv.vue';

export default {
  name: 'list',
  components: {
    TopNav,
    PopDiv,
  },
  data(){
    return{
      popShow:false,//规则弹出层是否显示
    }
  },
  methods:{
    //子组件对应父组件方法
    fatherPopShow(){
      this.popShow = true
    },
    //子组件对应父组件方法
    fahterPopClose(){
      this.popShow = false
    }
  }
}
</script>

子组件TopNav:

<template>
<ul class="nav">
<li @click="brotherPopShow">投票规则</li>
<li>排行榜</li>
</ul>
</template>
<script>
export default {
  name: "TopNav",
  props:{
    popShow:Boolean
  },
  methods:{
    brotherPopShow(){
      this.$emit("brotherPopShow",true) //通过this.$emit()传值
    }
  }  
}
</script>

子组件PopDiv:

<template>
<div class="popBg" v-show="popShow">
<!--此组件是否显示取决于popShow-->


<!--其他代码-->

<div class="popClose" @click="popClose">[关闭]</div>

<!--其他代码-->

</div>
</template>
<script>
export default {
  name: "PopDiv",
  props:{
    popShow:Boolean
  },
  methods:{
    popClose(){      
      this.$emit('popClose', false)
    }
  }
  
}
</script>

父子组件传值：

 父组件：

<template>
<div id="millia" class="indexBg">

<!--其他代码-->

<div class="checkInfo" @click="toPop">点击查看详细活动介绍</div>
<pop-div :popShow="popShow"  @popClose="fahterPopClose"></pop-div>
<!--:popShow子组件props接收数据名-->
<!--popShow父组件data中数据名-->
<!--@popClose子组件接收方法名-->
<!--fahterPopClose父组件对应方法-->


<!--其他代码-->

</div>
</template>
<script>
import PopDiv from '@/components/PopDiv.vue';
export default {
 name: 'index',
 components: {
  PopDiv
 },
 data(){
  return{
   popShow:false,//规则弹出层是否显示
  }
 },
 methods:{
  toPop(){
   this.popShow = true
  },
  //父组件方法
  fahterPopClose(){
   this.popShow = false
  }   
 },
}
</script>

子组件PopDiv:

<template>
<div class="popBg" v-show="popShow">
<!--此组件是否显示取决于popShow-->


<!--其他代码-->

<div class="popClose" @click="popClose">[关闭]</div>

<!--其他代码-->

</div>
</template>
<script>
export default {
  name: "PopDiv",
  props:{
    popShow:Boolean
  },
  methods:{
    popClose(){
      //this.$emit("自定义事件名",值) 
      //在父级引用时@自义定事件名=父级自定义事件
      this.$emit('popClose', false) 
      /*传多个值
      this.$emit("自定义时间名",[值,值,值])
      this.$emit("自定义时间名",{
        键:值,
        键:值,
        })
      */
    }
  }
  
}
</script>

关于vue $emit

补充：Vue3 的 $emit

<!--子组件示例  defineEmits引入  defineProps数据接收-->
<template>
<div class="search">
<input type="text" class="searchGroupInt" v-model="searchGroupTxt"><button class="searchGroupBt" @click="searchGroupButton"><i class="iconfont icon-sousuo"></i>
</button>
</div>

</template>
<script setup>
import {getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive} from 'vue';
defineProps({
  searchGroupData: Object,
  //searchUrl: '',搜索接口路径
  //searchParams: "",搜索参数
  //searchMethod:''//搜索方法post或get
})
//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance();

const emit = defineEmits(['searchGroupButton'])
let searchGroupTxt = ref()
const searchGroupButton = () => {
  emit("searchGroupButton",searchGroupTxt.value)
}




// 重要! 子组件传值方法

// 使用defineEmits注册一个自定义事件
// 如存在多个监听事件则为 defineEmits(['方法名1','方法名2','方法名3'])
const emit = defineEmits(["childEvent"])
 
// 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
const childEvent = () => {
  emit("childEvent", child.value)
  // 如果需要触发其他监听时间则为 emit('方法名2');
  // emit 对象触发的事件都应该为 defineEmits 声明后的事件
}

</script>