Vue组件通信

已于 2022-05-02 16:24:08 修改
阅读量332 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-03-17 21:07:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiayngbaidu12345/article/details/123560779
版权

Vue组件通信

1. 父子组件通信

  • props 、$emit

    props[父组件给子组件传递信息，子组件通过props绑定某个属性，例如title,然后父组件给title赋值,子组件通过{{title}}来显示从父组件那里获得的信息]

<template>
 <div>
    <h1>我是子组件</h1>
    <h2>{{title}}</h2>
</div>
</template>

<script>
export default {
 props:['title']
}
</script>

<style>

</style>
 <!--子组件-->

<template>
  <div id="app">
      <h1>我是父组件</h1>
      <Child :title="msg"></Child>
  </div>
</template>
<script>

import Child from './Child.vue';
export default{
   name:'App',
  components:{
      Child
  },
  data(){
    return{
      msg:'123456',
    }
  }
}
</script>

<style lang="less">

</style>
 <!--父组件-->

在这里插入图片描述

$ e m i t [ 子 组 件 给 父 组 件 传 递 信 息 v m . emit[子组件给父组件传递信息 vm. emit[子组件给父组件传递信息vm.$emit( event, arg )
e m i t 绑 定 一 个 自 定 义 事 件 e v e n t ， 当 这 个 这 个 语 句 被 执 行 到 的 时 候 ， 就 会 将 参 数 a r g 传 递 给 父 组 件 ， 父 组 件 通 过 @ e v e n t 监 听 并 接 收 参 数 。 以 下 面 的 为 例 ： 子 组 件 使 用 emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。 以下面的为例：子组件使用 emit绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。以下面的为例：子组件使用emit定义一个事件’to-parent’,携带的参数为’我是子组件从过来的信息’，父组件中通过@to-parent监听并接收传过来的参数’我是子组件从过来的信息’，通过处理函数将传过来的参数赋值给msg，再通过{{msg}}显示出来]

   <template>
     <h1>子组件</h1>
   </template>
   
   <script>
   export default {
    mounted:function(){
        this.$emit('to-parent','我是子组件从过来的信息')
    }
   }
   </script>
   
   <style>
   
   </style>
   <!--子组件-->
   ```

   <template>
     <h1>父组件</h1>
     <h2>{{msg}}</h2>
     <child @to-parent="handleToParent"></child>
   </template>
   
   <script>
   import child from './Child.vue'
   export default {
     components: { 
         child 
         },
     data(){
         return{
             msg:''
         }
     } ,
     methods:{
         handleToParent(msg){
             this.msg=msg
         }
     }   
   }
   </script>
   
   <style>
   
   </style>
   <!--父组件-->
   ```

  • ref 元素或子组件注册引用信息

  • $refs 获取通过ref注册的引用

    ref[父组件给子组件传递信息，
如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。
以下面为例:在父组件中通过ref='ch'将子组件child的实例指给$ref并且通过.ch.getMessage（）调用到子组件的getMessage方法，将参数传递给子组件。]

    <template>
  <h1>父组件</h1>
  <h2>{{msg}}</h2>
  <child  ref="ch"></child>
</template>

<script>
import child from './Child.vue'
export default {
  components: { 
      child 
      },
  data(){
      return{
          msg:''
      }
  } ,
  mounted:function(){
      this.$refs.ch.getMessage("我是父组件传过来的")
  }
  }
</script>

<style>

</style>
<!--父组件-->

    <template>
  <h1>子组件</h1>
 <h2>{{message}}</h2>
</template>

<script>
export default {
    data(){
      return{
          message:""
      }
    },
    methods:{
        getMessage(msg){
            this.message=msg;
        }
    }
}
</script>

<style>

</style>
<!--子组件-->

  • $parent获取当前组件的父组件实例

  • $children获取当前组件的子组件实例

    vue2中使用，但是vue3中已作废

<template>
 <div>
    <h1>我是子组件</h1>
    <h2>{{msg}}</h2>
</div>
</template>

<script>
export default {
    data(){
        return{
            msg:'hello',
        };
    },
    methods:{
       fun(){
           console.log('我是子组件'+this.$parent.msgP);
       }
    },
    mounted(){
        this.fun();
    }
}
</script>

<style>

</style>
    <!--子组件-->

<template>
  <div id="app">
      <h1>我是父组件</h1>
      <Child></Child>
  </div>
</template>
<script>

import Child from './Child.vue';
export default{
   name:'App',
  components:{
      Child
  },
  data(){
    return{
      msgP:'123456',
    }
  },
  methods:{
     fun(){
       console.log('我是父组件'+this.$children[0].msg);

     }
  },
  mounted(){
    this.fun();
  }
}
</script>

<style lang="less">

</style>
   <!--父组件-->

在这里插入图片描述

  1. 多层级父子组件通信

    • provide、inject
      多层级通信 爷爷到孙子-传值 provide-inject
      provide 选项应该是一个对象或返回一个对象的函数。
      inject 选项应该是：一个字符串数组，或一个对象。
      以下面为例：父组件通过provide将test的值传递给孙组件，孙组件通过inject来获取值，从而完成多层级通信。
   <template>
       <h1>父组件</h1>
       <child></child>
     </template>
     
     <script>
     import child from './Child.vue'
     export default {
       components: { 
           child 
           },
       provide:{
          test:"父组件->孙组件"
       }
       }
     </script>
     
     <style>
     
     </style>
     <!--父组件-->

 <template>
       <h1>子组件</h1>
       <grandson></grandson>
     </template>
     
     <script>
     import grandson from './Grandson.vue'
     export default {
         components:{
             grandson
         }
     }
     </script>
     
     <style>
     
     </style>
     <!--子组件-->

<template>
       <h1>孙组件</h1>
       <h2>{{test}}</h2>
     </template>
     
     <script>
     export default {
        inject:["test"]
     }
     </script>
     
     <style>
     
     </style>
     <!--孙组件-->

  • $attrs、 $listeners

     $attrs:   
    正常情况下：父组件通过v-bind绑定一个数据传递给子组件，子组件通过props接收到就可以在子组件的html中使用了。但是，如果父组件v-bind传递给子组件，子组件没有用props接收呢？
    注意：这个时候，父组件传递过来的数据就会被挂载(赋值)到这个子组件自带的对象$attrs上面，所以:
    $attrs就是一个容器对象，这个容器对象会存放:父组件传过来的且子组件未使用props声明接收的数据 。
爷组件传递给孙组件的逻辑流程
其实，爷组件传递给孙组件的逻辑流程就是，通过爷组件首先传递给父组件，当然父组件不在props中接收，那么爷组件传递给父组件的数据就会存放到父组件的$attrs对象中里面了，然后，再通过v-bind="$attrs"，再把这个$attr传递给孙组件，在孙组件中使用props就能接收到$attrs中的数据了，这样就实现了，祖孙之间的数据传递。

<template>
       <h1>父组件</h1>
       <child :msg="msg"></child>
     </template>
     
     <script>
     import child from './Child.vue'
     export default {
       components: { 
           child 
           },
        data() {
           return {
              msg:'我是父组件'
           }
       }   
       }
       
     </script>
     
     <style>
     
     </style>
     <!--父组件-->

 <template>
       <h1>子组件</h1>
       <h2>{{$attrs.msg}}</h2>
       <grandson v-bind="$attrs"></grandson>
     </template>
     
     <script>
     import grandson from './Grandson.vue'
     export default {
         components:{
             grandson
         }
     }
     </script>
     
     <style>
     
     </style>
     <!--子组件-->

 <template>
       <h1>孙组件</h1>
       <h2>{{msg}}</h2>
     </template>
     
     <script>
     export default {
        inheritAttrs: false,
        props:['msg']
     }
     </script>
     
     <style>
     
     </style>
     <!--孙组件-->

 $listeners
 使用$listeners可以实现孙组件的数据传递到父组件中去，逻辑的话，也是用在中间的桥梁子组件上面去，我的理解就是$listeners可以将孙组件emit的方法通知到父组件。
 第一步，在中间的子组件中加上$listenners

  <Son v-on="$listeners" @toGp="handleFun"></Son>

 第二步，父组件中定义事件方法

<template>
  <div id="app">
      <h1>我是父组件</h1>
      <h2>{{msgP}}</h2>
      <Child @toGp="handleFun"></Child>
  </div>
</template>
<script>

import Child from './Child.vue';
export default{
   name:'App',
  components:{
      Child
  },
  data(){
    return{
      msgP:'123456',
    }
  },
  methods:{
    handleFun(val){
      this.msgP=val;
    }
  },
}
</script>

<style lang="less">

</style>
 <!--父组件-->

 第三步，孙组件去触发事件方法即可

<template>
<div>
    <h1>我是孙组件</h1>
  <h2>{{msg}}</h2>
</div>
</template>

<script>
export default {
  data(){
      return{
          msg:'hello'
      }
  },
  methods:{
      p(){
          this.$emit('toGp',this.msg);
      }
  },
  mounted(){
      this.p();
  }
}
</script>

<style>

</style>
 <!--孙组件-->

<template>
 <div>
    <h1>我是子组件</h1>
     <h2>{{msg1}}</h2>
    <Son v-on="$listeners" @toGp="handleFun"></Son>
</div>
</template>

<script>
import Son from './Son.vue';
export default {
    components:{
       Son
    },
    data(){
        return{
            msg1:'hello',
        };
    },
    methods:{
         handleFun(val){
          this.msg1=val;
    }
    },
 
}
</script>

<style>

</style>

在这里插入图片描述

  1. 非关系组件通信

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this;
  }
}).$mount('#app')


<template>
  <div id="app">
      <h1>我是父组件</h1>
      <Child></Child>
  </div>
</template>
<script>

import Child from './Child.vue';
export default{
   name:'App',
  components:{
      Child
  },
  methods:{
     p(){
       this.$bus.$emit('myhub','hello');
     }
    
  },
  mounted(){
    this.p();
  }
}

</script>

<style lang="less">

</style>
     <!--父组件-->

<template>
 <div>
    <h1>我是子组件</h1>
     <h2>{{msg1}}</h2>
</div>
</template>

<script>
import Son from './Son.vue';
export default {
    components:{
       Son
    },
    data(){
        return{
            msg1:'',
        };
    },
    methods:{
         f(){
             this.$bus.$on('myhub',data=>{
                 this.msg1=data;
             })
         }
    },
   mounted(){
       this.f();
   }
 
}
</script>

<style>

</style>
   <!--子组件-->
岑**
关注
专栏目录
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
kang_vue_components:vue组件通信介绍原始码-源码通
03-24
让我们深入研究Vue组件通信的几种常见方式。 1. **props向下传递**： - 在Vue中，父组件可以使用`props`将数据传递给子组件。在`props`中定义接收的数据属性，然后在子组件的模板中使用它们。 - 例如：`...
vue组件通信
csD_Dscnnnnnnn的博客
03-22 1329
vue组件通信
常用的5种Vue组件通信方法
qq_38131840的博客
03-22 1524
Vue组件通信的常用方法
【前端高频面试题--Vue组件通信篇】
qq_45832651的博客
02-08 1941
最全最新Vue组件间通信，面试必问的高频题，等你来看！
vue组件通信provide/inject
m0_56219678的博客
10-05 840
vue组件通信provide/inject，解决深层次组件通信的，如果需要响应式，可以通过对象内属性的方式。
Vue组件通信之bus详解
kirinlau的专栏
11-28 3134
vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
Vue组件通信的六种方式
好的文章我尽力写，大家的学习我尽力帮
02-02 2万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listen
vue组件间通信
热门推荐
江拥羡橙的博客
09-16 3万+
本章我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。组件通信是组件式开发中非常重要的一部分，也是组件式开发中的难点。在学完本章之后，同学们可以通过反复地编写组件来加深印象。组件是 vue 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信，接下来让我们一个个介绍这几种类别的组件通信是如何实现的。
Vue 组件通信
m0_61619549的博客
08-22 2154
vue 2组件通信：props，$emit，provide和inject，$refs，$parent和$children，$attrs和$listeners，v-model，全局事件总线Bus，状态管理vuex。 vue 3 组件通信：props，$emit，provide和inject，ref和expose，$parent，$attrs，v-model，事件发射器/事件监听器库mitt，状态管理pinia。
vue 组件通信的几种方式
piaojiancong的博客
02-28 6217
vue组件通信的N种方式。
Vue组件通信之Bus的具体使用
08-28
Vue组件通信之Bus的具体使用 在Vue组件通信中，Bus扮演着非常重要的角色。Bus是一种集中式的事件中间件，它允许组件自由交流，无论组件处于组件树的哪一层。在Vue 2.0中，$dispatch和$broadcast已经被弃用，官方...
Vue组件通信的四种方式汇总
08-28
本文将详细介绍Vue组件通信的四种常见方法：父子组件通信、非父子组件的EventBus通信、使用localStorage或sessionStorage以及Vuex状态管理。 **1. 父子组件通信** 父子组件通信是最基础的通信方式，主要包括数据从...
jeecg3版本的vue，离线启动
sharesb的博客
10-16 330
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 705
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
原型链+instanceof+Vue底层原理
最新发布
m0_65985318的博客
10-18 902
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 180
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 845
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
Vue组件通信详解：从props到事件的传递
"Vue.js组件间通信解析，包括父子组件通信和兄弟组件通信的方法。" 在Vue.js中，组件间的通信是实现复杂应用的关键。Vue提供了多种方式来处理组件之间的数据交互，主要涵盖以下几种： 1. 父组件传子组件（属性传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值