vue3组件之间传值，父传子(props)，子传父(emit)，兄弟之间传值（mitt()插件）

在开发的时候都是使用组件开发，一个页面，是有多个组件构成的，通常需要通过各组件之间的传值来进行开发。用了vue3就很舒服。下面来介绍组件传值。
首先，是父传子，这个比较简单。
比如下面这个是父组件：

<template>
    <div class="daddiv">
       <div class="childdiv">
        
     
        <h1>我是father </h1> 

        <h1>--------------------------------------</h1>
       <h1> <Son1 :fatherdata="msg"/>  </h1>
    
      <h1>--------------------------------------</h1>

       <h1> <Son2  :fatherdata="msg" />  </h1>
        </div>
       </div>
  
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Son1 from './son1.vue'
import Son2 from './son2.vue'
export default defineComponent({
    name:'father',
    components:{
        Son1,
        Son2
    },
    setup(){
        let msg = "我是父亲，这是我给孩子们的信息：孩子们好！"
        return{
            msg
        }
    }
})
</script>
<style lang="less">
     .daddiv{
    //    background-color: aqua;
       height: 500px;
       width: 500px;
       margin:auto;
       padding: 10;
       overflow: hidden;
       margin-top: 10%;
       
     }

      .childdiv{
         margin-left:25%;
         margin-top: 30%;
       
       }
</style>

下面是子其中一个子Son1组件：

<template>
    <div>

       我是son1 通过props接收到父亲的消息是=》 <span> {{fatherdata}} </span>
         
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:'son1',
    props:{
        fatherdata:{
            type:String,
            requried:true
        }
    },
    setup(prop){
        console.log("孩子1+"+prop.fatherdata)
    }
})
</script>

所以第一个父传子就是直接把这值通过v-bind把数据绑定写到子组件里面，子组件通过props接收就行，比如一个表格孩子组件接收父亲传来的tabledata，然后在表格里面渲染

第二个子传父，这个就要用到setup里面的东西emit,

对于父组件：给每个子组件传递了一个自定义事件

<template>
    <div class="daddiv">
       <div class="childdiv">
        <h1>我是father </h1> 

         <h1>父亲说：{{sayMsg}}</h1>

        <h1>--------------------------------------</h1>
        
       <h1> <Son1  @sayHi="fathersay"/>  </h1>
    
      <h1>--------------------------------------</h1>

       <h1> <Son2  @sayHello="fathersay" />  </h1>
        </div>
       </div>
  
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import Son1 from './son1.vue'
import Son2 from './son2.vue'
export default defineComponent({
    name:'father',
    components:{
        Son1,
        Son2
    },
    setup(){
        // 响应式数据：即父亲要说的话
        let sayMsg = ref<string>("")
        // 接收函数,接收子组件的东西
        const fathersay = (info:string):void=>{
           sayMsg.value = info
        }
        return{
            sayMsg,
            fathersay,
        }
    }
})
</script>

Son1组件（方法1）：用context直接调用

<template>
    <div>
       我是son1 => <el-button type="primary" @click="Hi">点击让父亲说 Hi son1 </el-button>
         
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:'son1',
    setup(prop,context){
        // context上下文
        const Hi = ()=>{
        //第一个是父亲绑定的的回调函数名字，第二是数据
           context.emit('sayHi',"Hi son1")
        }
      return{
          Hi
      }
    }
})
</script>

对于Son2（方法2）:直接解构赋值来

<template>
    <div>

       我是son2 => <el-button type="primary" @click="Hello">点击让父亲说 Hello son2</el-button>

    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:'son2',
    setup(prop,{emit}){
        const Hello = ()=>{
        //第一个是父亲绑定的的回调函数名字，第二是数据
           emit('sayHello',"hello son2")
        }
     
      return{
          Hello
      }

    }
      
})
</script>

下面是代码效果

所以子传父就是直接在子组件上定义一自定义事件，然后在子组件里面通过emit调用就行。比如有时候组件表单里面数据发生了增删改查，需要立马更新，这时候就告诉父组件里面的函数，更新一下传下来的tabledata

接下来就是兄弟传值

首先如果是vue2 直接在vue的原型链上绑定

// 兄弟组件传值
Vue.prototype.$bus = new Vue()
this.$bus.emit()  
this.$bus.on()

vue3也是类似，但是有个更好的方法

首先来一个mitt文件，暴露出这个实例对象

import type {Emitter} from 'mitt';
import mitt from 'mitt';

export const emitter:Emitter = mitt();

父组件：

<template>
    <div class="daddiv">
       <div class="childdiv">
        <h1>我是father </h1> 

         <h1>父亲说：</h1>

        <h1>--------------------------------------</h1>

       <h1> <Son1 />  </h1>
    
      <h1>--------------------------------------</h1>

       <h1> <Son2 />  </h1>
        </div>
       </div>
  
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import Son1 from './son1.vue'
import Son2 from './son2.vue'

export default defineComponent({
    name:'father',
    components:{
        Son1,
        Son2
    }, 
})
</script>

然后son1 和son2内 进行引入
“发送方”为"emit" ，“收货方”为“on”
对于Son2要给Son1传话
对于Son2组件

<template>
    <div>

       我是son2 => <el-button type="primary" @click="sendInfo">点击让兄弟son1 说 我是小弟，son2是大哥</el-button>

    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

// 导入一个实例对象 emitter
import {emitter} from './mitt'
export default defineComponent({
    name:'son2',
    setup(prop,{emit}){
       
        const sendInfo = ()=>{
            // 第一个是事件名字，第二个是数据信息
               emitter.emit("sayInfo","我是小弟，son2是大哥") 
        } 
     
      return{
          sendInfo
      }

    }
      
})
</script>

对于Son1 是接收事件，所以要放在Onmouted生命周期钩子函数，时刻关注着变化

<template>
    <div>
       我是son1 => 我应该说{{msg}}
         
    </div>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue'

// 导入一个实例对象 emitter
import {emitter} from './mitt'
export default defineComponent({
    name:'son1',
    setup(prop,context){
       let msg = ref<string>("")
        onMounted(
            ()=>{
                // 第一个是事件名字，第二个是回调函数
                emitter.on("sayInfo",(info:any)=>{
                 msg.value = info
                })
            }
        )
        return{
            msg
        }
      
    }
})
</script>

下面是效果图

所以对于兄弟组件传值，父亲那里就不用管，直接用mitt(）函数，on 和emit属性，emit是发送方，on是接收方，要放在Onmouted里面

感觉有帮助就点个赞收藏一下，谢谢大佬们来一起探讨这个问题！！
祝你2022年快乐

最后

以上就是曾经枕头为你收集整理的vue3组件之间传值，父传子(props)，子传父(emit)，兄弟之间传值（mitt()插件）的全部内容，希望文章能够帮你解决vue3组件之间传值，父传子(props)，子传父(emit)，兄弟之间传值（mitt()插件）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。