Vue组件通信的六种方法

最新推荐文章于 2024-07-22 21:47:11 发布
最新推荐文章于 2024-07-22 21:47:11 发布
阅读量1w 收藏 48
点赞数 9
分类专栏： vue 文章标签： vue 组件通信 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iiichigo/article/details/83719312
版权

组件通信在vue中十分重要，在这里先给大家介绍六种，之后也会慢慢补充

目录

1. 父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化

2. 父组件将自己的方法传递给自组件，子组件调用方法传数据给父组件

3. 父组件给子组件绑定事件

4. ref通信

5. 使用event bus事件总线 

6.使用$root,$parent,$children

1. 父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化

注意：父组件和子组件并不是共用同一个数据，而是父组件将自己的数据复制了一份传给子组件，父组件数据变化时都会重新传值dom也会重新渲染 但子组件不能去直接修改父组件的值

<div id="app">
        <h1>app</h1>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <input type="text" v-model='message' >
            <h2>{{message}}</h2>
            <app-son :message="message"></app-son>
        </div>  
    </template>

    <template id="app-son">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </template>
Vue.component('app-father',{
        template:'#app-father',
        data(){
            return{
                message:''
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        props:['message'] // 自组件利用props属性接收数据
    })

    new Vue({
        el:'#app'
    })

2. 父组件将自己的方法传递给自组件，子组件调用方法传数据给父组件

<div id="app">
        <h1>app</h1>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <h2>app-fatehr</h2>
            <h2>{{money}}</h2>
            <app-son :get-money="giveMoney"></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
            <button @click='get'>son-getMoney</button>
            <h3>app-son---{{money}}</h3>
        </div>
        
    </template>
Vue.component('app-father',{
        template:'#app-father',
        data(){
            return {
                money:100
            }
        },
        methods:{
            giveMoney(money){
                this.money-=money
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        props:['getMoney'],   // 接收的是一个方法
        data(){
            return{
                money:0
            }
        },
        methods:{
            get(){
                this.getMoney(10) // 调用时可以传参数也可以不传  使用this是因为接收了 就相当是自己的方法了
                this.money+=10
            }
        }
    })

    new Vue({
        el:'#app'
    })

3. 父组件给子组件绑定事件

事件的处理程序就是父组件的方法，自组件使用$emit调用方法的时候可以传数据给父组件，子组件不需要接收 直接是用$emit来触发函数 参数跟在后面

<div id="app">
        <h1>app</h1>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <h2>app-fatehr</h2>
            <h2>{{money}}</h2>
            <app-son @get-money="giveMoney"></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
            <button @click='get'>son-getMoney</button>
            <h3>app-son---{{money}}</h3>
        </div>
        
    </template>
 Vue.component('app-father',{
        template:'#app-father',
        data(){
            return {
                money:100
            }
        },
        methods:{
            giveMoney(money){
                this.money-=money
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        data(){
            return{
                money:0
            }
        },
        methods:{
            get(){
                this.$emit('get-money',10)  // 后面跟传递的参数
                this.money+=10
            }
        }
    })

    new Vue({
        el:'#app'
    })

4. ref通信

ref 和 关系链 组件可以利用ref为自己的dom做出独有的标记，利用this.$refs来获得从而进行操作

<div id="app">
        <button @click='get'>get</button>
        <app-father ref='kids' v-for='x in 10'></app-father>
    </div>

    <template id="app-father">
        <input type="text" v-model="message">
    </template>
Vue.component('app-father',{
        template:'#app-father',
        data(){
            return{
                message:'hello vue.js'
            }
        }
    })
    new Vue({
        el:'#app',
        methods:{
            get(){
                this.$refs.kids.forEach(element => {  // 这时的kids是一个数组
                    console.log(element.message)
                });
            }
        }
    })

5. 使用event bus事件总线 

这个知道的人没有很多 但是也比较简单 也很重要

<div id="app">
        
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
           <button @click='hint'>hit</button>
            <app-son></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
          
        </div>
    </template>
// 使用event bus 事件总线来传递数据 
   var bus = new Vue()

    Vue.component('app-father',{
        template:'#app-father',
        methods:{
            hint(){
                bus.$emit('son-toCry')  // 触发bus上绑定的son-toCry函数
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        methods:{
            cry(){
                console.log('wuwuwuwu.........')
            }
        },
        // 在初始化的时候绑定事件
        mounted(){
            bus.$on('son-toCry',()=>{
                this.cry()
            })
        }
       
    })

    new Vue({
        el:'#app'
    })

6.使用$root,$parent,$children

在每一个组件的实例身上，都有$root,$parent,$children来指向最外面成根实例、父组件实例、子组件实例们，所以，理论上来说，因为存在一条关系链，所以任意的组件都能找到除了它之外的任意的组，/这样的话我们就可以进行任意的通信,更改数据、调用方法。但是，不要这么做，因为组件的作用域应该都是独立的

比如，数据放在子组件身上，让父组件去改，这种思路本身就是不科学的，所以应该数据放在父组件身上，父组件把数据传递给子组件，父组件更改数据的时候，子组件也就改了

<div id="app">
        <button @click='get'>btn</button>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <button @click='get'>btn</button>
           <app-son></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
           <button @click='get'>btn</button>
        </div>
        
    </template>

    Vue.component('app-father',{
        template:'#app-father',
        data(){
            return {
                message:'father'
            }
        },
        methods:{
            get(){
                console.log(this)
                console.log(this.$children[0].message)  // console.log(son)
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        data(){
            return {
                message:'son'
            }
        },
        methods:{
            get(){
                console.log(this)
                console.log(this.$parent.$parent.message) // console.log(app)
            }
        }
     
    })

    new Vue({
        el:'#app',
        data:{
            message:'app'
        },
        methods:{
            get(){
                console.log(this)
                console.log(this.$children[0].message)  // console.log(father)
            }
        }
    })

 

iiichigo
关注
专栏目录
12种组件通信的方法
weixin_68902642的博客
07-15 1503
12种数组通信的方法
Vue组件通信的六种方式
EarlEcho
05-24 870
在平时的开发过程中，父子 / 兄弟组件间的通信是肯定会遇到的啦，所以这里总结了 6 种 Vue 组件的通信方式： 1. props / $emit 2. $emit / $on 3. Vuex 4. $attrs / $listeners 5. $parent / $children 与 ref 6. provide / inject 前言 如上图所示，A/B，B/C，B/D组件是父子关系，C/...
vue中8种组件通信方式
最新发布
weixin_53954018的博客
07-22 1059
上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上父子组件通信:props;ref;
Vue中组件之间8中通信方式
08-24 806
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间...
vue 组件之间的通信
青蛙king的博客
08-14 5099
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
组件通信的方法
HQ\(^o^)/的博客
09-02 1442
1.props 通过属性传值，子props接收2.$emit/v-on 父组件使用子组件声明的自定义事件，传值时触发3.v-model 原理即props与$emit；父：v-model="值"、子：this.$emit('input',值)4..sync 原理即：属性名& this.$emit('update:属性名', 值)5.refs 操作dom，通过this.$refs6.$children/$parent this.$children获取所有子组件的数组对象，包括子组件的属性和监听事件；
Vue中的组件通信(六种方法详解)
XinKun的博客
02-23 2785
一、关于组件通信 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 组件可以有以下几种关系：父子关系， 兄弟关系，隔代关系（可能隔多代）。 本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject。 图示如下： 二、组件通信的方式： 方法一、props/$emit 父组件A通过props的方式向子组件B传递，B t
vue组件通信的八种方式
m0_44973790的博客
04-20 1298
vue组件的通信方式
Vue组件通信——父子组件通信的四种方法
热门推荐
weixin_44001906的博客
07-13 1万+
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致） 之后就可以全局使用组件了 局部引入 在父组件中引入 import ChildrenDemo from '@/views/components/Ch
vue组件间通信六种方式（总结篇）
01-19
前言 组件是 vue.js最强大的功能之一...本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $children 、 $attrs / $listeners 和provide/inject，以通俗易懂的实例讲述这其中的差别及使用
vue子组件之间的通信方式
07-17
Vue组件,如何创建子组件，如何实例化一个vue的实例，如何进行组件之间的通信。这是重点。组件之间的通信方式有多种。
详解vue跨组件通信的几种方法
08-30
vue 跨组件通信方法详解 在 Vue 中，跨组件通信是指在不同的组件之间传递数据或事件，实现组件之间的交互。...Vue 中有多种跨组件通信的方法，每种方法都有其优缺。选择合适的方法，取决于项目的需求和复杂度。
vue中组件间通信的几种方法（总结）
俺也不敢问
01-29 683
好记性不如烂指头，看了很多资料后，想把他们整合整合，方便如果忘了得话可以看一下。 父传子（使用props） 父组件 <template> <div class="parent"> 父组件: <!-- 引入子组件 --> <chlidren :inputName="name"></chlidren> //...
Vue中组件通信
Machoul的博客
03-30 506
Vue中组件通信 props的使用 功能：让组件接收外部传过来的数据 传递数据的方式：<Demo name="xxx"/> 接收数据的方式： 只接收：props:['name'] 接收并限制类型：props:{name:String} 限制类型，必要性，指定默认值 props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } } props是只读的，Vu
vue中各种组件之间如何通信?
nick_zhang的博客
05-30 538
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系，A 和 D 是隔代关系。 针对不同的使用场景，他们之间如何通信呢？ 1.父子组件通信 父传子 v-bind 子接收父 props 子传父 $emit 父接收子 on 父调用子 $refs 子调用父
vue中组件通信方式
qq_33274031的博客
05-17 286
vue组件通信方式
简单高效的组件间通信方法
tillerconfi的博客
09-20 154
组件间通信组件间利用事件来进行通信 组件间利用事件来进行通信 组件A完成一件事情后，出发事件e，然后在组件B的created方法中增加一个对事件e的监听方法，具体代码如下。 创建一个bus.js文件 import Vue from 'vue' export default new Vue; 组件A触发事件 import Bus from '../common/bus' Bus.$emit("qu...
组件通讯的八种方式及使用方法
xinshoudandan的博客
04-28 1033
.组件传值的八种方式
Vue组件间通信：六种方法详解
"这篇文章除了介绍vue组件间通信的基本概念，还详细阐述了六种常见的通信方式，包括props/$emit、$parent/$children、$attrs/$listeners、vuex、provide/inject以及非父子组件间的事件总线。" Vue.js的组件化设计是...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值