Vue组件通信方式(父传子、子传父、兄弟通信)

目录
  • 父组件传到子组件
  • 子组件向父组件传值
  • 非父子传参 (事件总线)
  • vue 跨页面双向通信
    • 同源通信
    • 非同源通讯

父组件传到子组件

父组件是通过props属性给子组件通信的

数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)

1. 父组件parent.vue代码如下:

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

2. 子组件son代码如下:

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容:{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
     }
   },
   props:['faMsg'],//接收psMsg值
 }
</script>

子组件通过props来接受数据

  • 第一种方法
props: ['childCom']
  • 第二种方法
props: {
    childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦
}
  • 第三种方法
props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

子组件向父组件传值

通过绑定事件然后及$emit传值

vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据

1.父组件parent代码如下:

父组件通过绑定自定义事件,接受子组件传递过来的参数

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <p>父组件接手到的内容:{{ username }}</p>
     <son psMsg="我是你爸爸" @transfer="getUser"></son> 
      <!-- 监听子组件触发的transfer事件,然后调用getUser方法 -->
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
       username:'',
     }
   },
   components:{son},
   methods:{
     getUser(msg){
       this.username= msg
     }
   }
 }
 </script>

2.子组件son代码如下:

子组件通过$emit触发父组件上的自定义事件,发送参数

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容:{{ psMsg }}</p>
     <!--<input type="text" v-model="user" @change="setUser">-->
     <button @click="setUser">传值</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
       user:'子传父的内容'
     }
   },
   props:['psMsg'],
   methods:{
     setUser:function(){
       this.$emit('transfer',this.user)//触发transfer方法,this.user 为向父组件传递的数据
     }
   }
 }
 </script>

非父子传参 (事件总线)

假设你有两个Vue组件需要通信: A 和 B ,A组件按钮上面绑定了点击事件,发送一则消息,B组件接收。

1. 初始化,全局创建$bus

直接在项目中的 main.js 初始化 $bus :

// main.js
window.$bus=new Vue();

注意,这种方式初始化一个 全局的事件总线 。

2. 发送事件

$bus.$emit("aMsg", '来自A页面的消息');
<!-- A.vue -->
<template>
   <button @click="sendMsg()">-</button>
</template>
<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自A页面的消息');
   }
 }
}; 
</script>

接下来,我们需要在 B页面 中接收这则消息。

4. 接收事件

$bus.$on("事件名",callback)
<!-- IncrementCount.vue -->
<template>
 <p>{{msg}}</p>
</template>
<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // A发送来的消息
     this.msg = msg;
   });
 }
};
</script>

<<<<<<<<<<<<<<下方是拓展,面试不必说>>>>>>>>>>>

事件总线推荐下面写法:

集中式的事件中间件就是 Bus。我习惯将bus定义到全局:

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:

分发事件的组件

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

监听的组件

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
}

如果需要监听多个组件,只需要更改 bus 的 eventName:

// ...
created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('firstTodo', this.firstTodo);
  this.$bus.$off('secondTodo', this.secondTodo);
}

vue 跨页面双向通信

同源通信

1. localStorage

添加时间监听

window.addEventListener('storage', function (e) {});

改变 localStorage 值,触发 storage 事件

window.localStorage.setItem('params', JSON.stringify(object));

2. 通过跳转 url 传参

// 跳转路径带参数

3. 通过 BroadCast channel 广播实现通信

// 创建一个广播频道
const bc = new BroadcastChannel('kaixin');
// 其他页面可以通过onmessage来监听被广播的消息
bc.onmessage = function (res) {
    const data = res.data;
};
// 发送消息时直接调用实例上的postMessage方法
bc.postMessage(data);

4. shareWorker

非同源通讯

1. iframe 嵌套 

1、发送消息
window.postMessage(message, targetOrigin, [transfer])
// message  需要传的数据[object]
// 目标窗口(URI), *代表没有限制任何窗口都能接收
// transfer 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
2、监听发来的消息
window.addEventListener("message", receiveMessage, false);
// receiveMessage 处理函数[$event]
function receiveMessage(event){
    // 参数 event
    // event.data 就是你传的参数
    // event.origin 发送者的目标url,做安全验证
    // event.source 发送者的window对象
    
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue中组件通信的八种方式(值得收藏!)

    前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

  • Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

    前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.

  • 详解Vue3的七种组件通信方式

    目录 写在前面 举一个栗子 Props方式 emit方式 v-model方式 refs方式 provide/inject方式 事件总线 状态管理工具 写在前面 本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述. 本篇文章将介绍如下七种组件通信方式: props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) 开始搞

  • vue组件和iframe页面的相互传参问题及解决

    目录 vue组件和iframe页面相互传参 vue组件调用iframe页面方法和参数 iframe页面向vue组件传参 内嵌iframe页面并进行传值 vue组件和iframe页面相互传参 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白: 而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参: vue组件调用iframe页面方法

  • Vue组件通信方式(父传子、子传父、兄弟通信)

    目录 父组件传到子组件 子组件向父组件传值 非父子传参 (事件总线) vue 跨页面双向通信 同源通信 非同源通讯 父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告) 1. 父组件parent.vue代码如下:  <template>    <div class="parent">      <h2>{{ msg }}</h2>      

  • 深入了解Vue组件七种通信方式

    目录 1. props/$emit 简介 代码实例 2. v-slot 简介 代码实例 3. $refs/  $parent/ $children/$root 简介 代码实例 4. $attrs/$listener 简介 代码实例 5. provide/inject 简介 代码实例 6. eventBus 简介 原理分析 代码实例 7. Vuex 代码实例 总结 vue组件通信的方式,这是在面试中一个非常高频的问题,我刚开始找实习便经常遇到这个问题,当时只知道回到props和 $emit,后来随

  • require.js 加载 vue组件 r.js 合并压缩的实例

    准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

  • 关于vue组件的更新机制 resize() callResize()

    目录 组件的更新机制 resize() callResize() 异步更新机制是如何实现的 组件的更新机制 resize() callResize() 假设有一段代码,通过isCollapse改变触发ref的子组件child触发方法resize(),借着触发callResize()方法. 这是vue组件的更新机制. 子组件是child,父组件是整个界面 ,在父组件上任意触发监听,调用方法resize(): resize()调用callResize(),callResize()把下面的3个方法的r

  • Vue组件的继承用法示例详解

    目录 Vue组件的继承用法 Vue组件的继承用法 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜参数的需要多重的判断,这样会导致封装的组件比较繁杂,出现过多的判断,用继承可以改写基类中的方法和数据 基类案例: <template> <div class="hello"> 父类:{{name}} <span>{{title}}</sp

  • VUE子组件向父组件传值详解(含传多值及添加额外参数场景)

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • Vue组件通信之父传子与子传父详细讲解

    目录 父组件传递给子组件 浅谈Props 子组件传递给父组件 父组件传递给子组件 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props来完成组件之间的通信 通过props来完成组件之间的通信 浅谈Props 那么什么是Props呢? 作用:接受父组件传递过来的属性 Props是你可以在组件上注册一些自定义的attribute(属性): 父组件给这些attribute(属性)赋值,子组件

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

随机推荐