vue中的组件通信（传值）

青田。

已于 2022-07-07 22:41:24 修改

阅读量675

点赞数

分类专栏： vue 文章标签： vue.js 前端

于 2022-06-23 23:16:59 首次发布

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125435471

版权

vue 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

这里列举几个常用的传值方式

一、父子组件传值----正向传值----props（props 是一个属性）

普通传值（三步走）

①在data methods同级使用props：[ 接收父组件传值的变量1，接收父组件传值的变量2，....n ]

②在组件中进行使用

③父组件传值

比如父组件(father.vue)中的 “哈喽” 要在子组件中用

<template>
  <div>
      father
        
      //3.父组件给子组件传递数据(SonText当作属性写)
      <Son :SonText="fatherText" SonTit="我是第二个数据"/>
  </div>
</template>

<script>
import Son  from "./son.vue"
export default {
    components:{
          Son  
    },
    data(){
        return {
            fatherText:"哈喽"
        }
    }
}
</script>

子组件(son.vue)使用：

<template>
  <div>
        //2.在子组件中使用接收这个变量
       Son  -------{{SonText}} -----{{SonTit}}
  </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    // 1.在子组件设置接受变量
    props:["SonText","SonTit"]
}
</script>

传值验证

在传统的props验证的写法中我们可以给子组件传递任何数据类型的数据

但是在一些特殊情况下这样可能会出问题（就是如果子组件拿到数据需要对数据进行操作的时候可能不同的数据类型所展示的结果就会出现偏差）

props验证如果验证不成功不会影响我们页面展示他会在控制台给我们一个警告提示我们开发者有问题

语法：

props:{

你要接受的变量 : 数据类型

}

1.在Son.vue组件中，data methods等同级位置使用 props:{}

<template>
  <div>
     Son-------------{{title+6}}
  </div>
</template>

<script>
export default {
    // props:["title"]
    // 验证的写法
    props:{
        // title:Number //我要接受的title必须是数字类型
        // title:[Number,Boolean] // 既可以传递number又想传递布尔
        // 既想验证数据类型  又想验证不能为空
        title:{
            type:Number,// 验证数据类型
            required:true//不能为空
        }
    }
}
</script>

二、子父组件传值--------逆向传值（用的比较少了容易忘记）

逆向传值默认是不被允许的所以我们如果想进行逆向传值的话那么我们必须要通过事件来触发传递

①在子组件中创建一个事件触发一个函数进行逆向传值的准备

②把数据绑定到自定义事件之上

③接收自定义事件使用数据 this.$emit( "你自定义事件的名字"，“数据” )

<template>
  <div>
       Son
      <button @click="sonFun()">点我逆向传值</button>
  </div>
</template>

<script>
export default {
    data(){
            return {
                SonText:"我是子组件的数据"
            }
    },
    methods:{
        sonFun(){
              // 使用自定义事件抛出子组件的数据
               this.$emit('tian',this.SonText) 
        }
    }
}
</script>

父组件(father.vue)中

<template>
  <div>
        father
        // 父组件接受的这个函数不加()不加()不加()不加()不加()不加()不加()
        // <Son @tian="demo()"/>  //这样就不行

        <Son @tian="demo"/> 
  </div>
</template>

<script>
import Son from "./son.vue"
export default {
    components:{
        Son
    }，
    methods:{
        demo(text){
            console.log('text',text)
        }
    }
}
</script>

三、兄弟组件传值---- 同胞传值--中央事件总线（eventBus）

就是同一父组件下的子组件进行相互的数据传递

首先有个home页面，然后有一对兄弟组件SonOne和SonTwo

home里引入SonOne和SonTwo

<template>
  <div>
      <SonOne />
      <SonTwo /> 
  </div>
</template>

<script>

import SonOne from "@/components/Sonone.vue"
import SonTwo from "@/components/Sontwo.vue"
export default {
    components:{
        SonOne, SonTwo 
    }
}
</script>

①在src下创建一个eventBus文件夹（就是容纳中央事件总线的文件夹）

index.js里写

// 容纳中央事件总线
import Vue from "vue"
export default new Vue

②在要传递的组件之上抛出

在sonone.vue里

<template>
  <div>
       Sonone
      <!-- 1.需要通过事件来触发 -->
      <button @click="fun()">点我传值给Sontwo</button>
  </div>
</template>

<script>
// 2.引用中央事件总线
import Eventbus from "@/eventbus"
export default {
    methods:{
        fun(){
            // 3.开始使用中央事件总线来传出数据
            // 在中央事件总线的这个空vue实例之上绑定了一个自定义事件
            Eventbus.$emit("tian","我是sonone的数据么么哒！！")
        }
    }
}
</script>

③在接收的组件中接收（sontwo.vue中接收）

<template>
  <div>
      SonTwo
  </div>
</template>
<script>
// 1.引用中央事件总线
import Eventbus from "@/eventbus"
export default {
    mounted(){
        // 2.使用中央事件总线来监听接收数据
        // $on() 监听实例上的自定义事件
        //语法：   Eventbus.$on("你要监听的事件名"，(自定义事件上的数据)=>{})
        Eventbus.$on("tian",(val)=>{
            console.log(val)
        })
    }
}
</script>