VUE 组件简单通信

VUE的开发像搭积木,由一个一个的组件搭建而成,那么组件之间的关系就要十分清晰,有什么关系呢?他们又如何通信呢?

组件之间的关系大致上有两种: 1、父子关系(一个) 2、兄弟

回到正题,明确了各组件的关系呢,我们就可以去探究他们如何通信了。通信的种类要多于关系的种类。大致上分为三种:1、父子通信 2、兄弟通信 3、跨层级通信

一、首先我们谈论父子之间如何通信

(1)、父向子传递信息 例如:告诉儿子快去吃饭。 通过 props

//父组件
<template>
  <div id="app">
    <son v-bind:message="why"></son>//子组件
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'father',
  data(){
    return{
      why:'快去吃饭'
    }
  },
  components:{
    "users":Users
  }
}

//son子组件
<template>
  <div class="hello">
   <h4>{{}}</h4>
  </div>
</template>
<script>
export default {
  name: 'son',
  props:{
    message:{           //message 就是父组件在子组件模版中传的的数据
      type:String,//对数据效验 类型
      required:true//是否强制
    }
  }
}
</script>

(2)、子向父传递信息 例如:告诉父亲我知道了 通过$emit('监听','数据')

//父组件
<template>
  <div id="app">
    <h4>{{why}}</h4>
    <son  v-on:callback="todo"></son>//子组件 //设置callback监听
  </div>
</template>

<script>
import Users from "./components/Users"
export default {
  name: 'father',
  data(){
    return{
      why:''
    },
  mehtods:{
    todo(e){
     this.why = e
    }
  },
  components:{
    "users":Users
  }
}
<template>
  <div id="app">
    <button @click="todo"></button>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'son',
  data(){
    return{
      message:'我吃了'
    }
  },
  methods:{
    todo(){   //方法
      this.$emit('cellback',message);//通知父组件的监听
    }
  },
}
</script>

二、接下来讲一下兄弟组件的通信  例如:A告诉B我们一起去吃饭。 通过eventbus来通信

创建一个enentbus.js

// eventbus.js
import Vue from 'vue'
export const EventBus = new Vue()//公开这个对象

在需要通信的组件中引入 这个对象 例如:

A组件

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../eventbus.js"; //导入相同的eventbus
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("why", '我们一起去吃饭吧!');//通知名为why的监听事件发送我们一起去吃饭吧!
    }
  }
}; 
</script>

B组件

<!-- B.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import {  EventBus } from "../eventbus.js"; //导入共同的中间件
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {//vue的周期函数 dom挂载结束
    EventBus.$on("why", (msg) => {//监听why的事件线
      // A发送来的消息 更新导p标签
      this.msg = msg;
    });
  }
};
</script>

三、跨层级通信 比如:爷爷告诉孙子你来我家吃饭吧。

1、爷爷组件中

//App.vue中定义变量,引入子组件
<template>
   <div>
     <son></son>
   </div>
 </template>
 ​
 <script>
   import son from './components/son.vue'
   export default {
     name: "y",
    
     data(){
        return{
      message:'孙子,来我家吃饭吧。'
     }
  },


     provide() {//提供数据
        return{
          why: this.message //why 不会挂在vue实例上 需要自己声名在data中
         }
     },
     components:{
       son 
     }
   }
 </script>

2、儿子组件中

//./components/Son.vue 子组件中引入孙子组件调用父组件数据
<template>
   <div>
     {{msg}}
     <groundSon></groundSon>
   </div>
 </template>
 ​
 <script>
   import groundSon from './components/groundSon.vue'
   export default {
     name: "son",
     inject: ['why'],//提取数据 
     data() {
       return {
         msg: this.why
       }
     },
     components: {
       groundSon 
     }
   }
 </script>

3、孙子组件中

// ./components/groundSon.vue  孙子组件中引用它爷爷的数据
 <template>
   <div>
     {{msg}}
   </div>
 </template>
 ​
 <script>
   export default {
     name: "groundSon",
     inject: ['why'],
     data() {
       return {
         msg: this.why
       }
     }
   }
 </script>

跨层级通信的特点:爷爷提供的信息不仅儿子可以访问,而且孙子也可以拿到。

注意:只有引用类型是响应式的

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值