vue中组件之间相互通信传值的几种方法详解

目录
  • vue中组件之间相互通讯传值的方式
    • 1、子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现
    • 2、父组件主动获取子组件数据
    • 3、使用provide/inject方法实现
    • 4、使用事件总线
    • 5、vuex\localStorage\sessionStorage
  • 总结

vue中组件之间相互通讯传值的方式

我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用。

我们在封装组件的时候经常会留有一些预留的接口,供使用的时候调用和传入不同的数据,这个时候我们就涉及到了组件之前的相互传值的问题。

我这里总结了在vue中组件之前相互传值的方法:

1、子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现

<!--parent.vue-->
<template>
    <div>
        <h4>我是父组件:</h4>
        <p>这是我自己的数据{{num}}</p>
        <!--通过给子组件传入自定义属性值,传数据用v-bind或者简写形式:号, 传方法可以使用v-on或者简写@符绑定事件-->
        <child :p-num="num" :p-num2="num2" @changePNum="changeNum" />
    </div>
</template>
<script>
    import child from './child.vue'
    export default{
        name: 'parent',
        data(){
            return{
                num: 10,
                num2: 20
            }
        },
        methods:{
            changeNum(n){
                this.num = n;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <h4>我是子组件:</h4>
        <!--第一种可以使用props对象来接收父级传过来的属性-->
        <p>这是通过props接收父级组件传过来的数据{{ pNum}}</p>
        <!--第二种是通过元素的实例属性$attrs获取,没有呗props接收的剩余属性-->
        <p>这是通过组件中的$attrs对象获取父级组件传过来的数据{{ $attrs['p-num2']}}</p>
        <!--第三种是通过当前实例中的$parent属性拿到父级实例对象-->
        <p>这是通过组件中的$attrs对象获取父级组件传过来的数据{{ topNum }}</p>
        <button @click="changeNum">通过$emit改变父级的数据</button>
        <button @click="changeNum2">通过$listeners改变父级的数据</button>
        <button @click="changeNum3">通过$parent改变父级的数据</button>
    </div>
</template>
<script>
    export default{
        name: 'child',
        // 第一种可以使用props对象来接收父级传过来的属性
        props:{
            // 这里写对应的要接收的属性名以驼峰的形式接收
            pNum: {
                type: Number
            }
        },
        data(){
            return {
                topNum: 0
            }
        },
        created(){
            // 通过使用实例中的$parent拿到父级组件的实例,然后获取值
            this.topNum = this.$parent.num;
        },
        methods:{
            changeNum(){
                // 这里是通过当前组件中的$emit方法来调用父级传过来的方法,并且可以传入参数
                this.$emit('changePNum', 40);
            },
            changeNum2(){
                // 通过组件中的$listeners中的存储的父级传过来的方法进行调用
                this.$listeners.changePNum(50);
            },
            changeNum3(){
                // 通过组件中的$listeners中的存储的父级传过来的方法进行调用
                this.$parent.changeNum(60);
            }
        }
    }
</script>

上边的代码展示了两种不同形式的组件之间的通讯方式,父组件传值方式相同,子组件获取操作方式不同

1.props/$emit组合方式:子组件通过定义props值拿到父组件传给子组件的属性来获取;子组件通过使用$emit方法调用父组件的方法;

2.$attrs/$listeners组合方式:子组件可以通过$attrs属性中的值拿到父组件传给子组件的属性值,它里边存储的是props之外的属性值;

3.$parent方法获取父组件中的数据和方法

2、父组件主动获取子组件数据

<!--parent-->
<template>
    <div>
        <button @click="changeChildANum">通过$refs调用子组件方法更改子组件数据</button>
        <button @click="changeChildBNum">通过$children调用子组件方法更改子组件数据</button>
        <p>这是获取的子组件childA的数据:{{childA_num}}</p>
        <p>这是获取的子组件childB的数据:{{childB_num}}</p>
        <!--这里通过使用ref把组件示例注册到当前组件的$refs中-->
        <child-a ref="childA"/>
        <child-b />
    </div>
</template>
<script>
    import childA from './childA.vue';
    import childB from './childA.vue';
    export default{
        components:{
            childA,
            childB
        },
        data(){
            return {
                childA_num: 0,
                childB_num: 0
            }
        },
        created(){},
        mounted(){
            // $refs 和 $children 都是需要在mounted中才能获取到
            // 这里通过$refs获取注册在里边的子组件实例,并且获取他的数据
            this.childA_num = this.$refs.childA.num
            // 第二种方式通过当前组件示例中的$children获取子组件实例
            this.childB_num = this.$children[1].num;
        },
        methods:{
            changeChildANum(){
                // 这里通过使用$refs中的组件实例调用组件中的方法
                this.$refs.childA.changeNum();
            },
            changeChildBNum(){
                // 这里通过使用$refs中的组件实例调用组件中的方法
                this.$children[1].changeNum();
            }
        }
    }
</script>
<!--child-->
<template>
    <div></div>
</template>
<script>
    export default{
        name: 'childA',
        data(){
            return{
                num: 10
            }
        },
        methods:{
            changeNum(){
                this.num++;
            }
        }
    }
</script>

1.ref/$refs方式,通过给引入的组件定义一个ref属性,然后就可以通过$refs结合该属性值得到当前组件的实例

2.ref/$children属性,给组件定义ref值后,当前组件实例中会在this.$children中拿到所有定义了ref的组件数组,我们在通过下标进行获取某个子组件的方法后者属性值。

3、使用provide/inject方法实现

<!--parent.vue-->
<template>
    <div>
        <child />
    </div>
</template>
<script>
    import child from './child.vue';
    export default{
        // 通过给父级定义一个provide对象,并且定义成一个函数形式,然后返回一个parentData对象,并且对象指向当前组件的一个数据对象上,这样相当于都指向一个对象
        provide(){
            return {
                parentData: this.proVideData
            }
        }
        name: 'Parent',
        components:{
            child
        },
        data(){
            return{
                proVideData: {
                    num, 1,
                    changeNum: null
                }
            }
        },
        created(){
            // 然后通过实例化后把需要被子组件调用到的方法传入进去
            this.proVideData.changeNum = this.changeNum;
        },
        methods:{
            changeNum(){
                this.proVideData.num++;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <p>{{parentData.num}}</p>
        <button @click="parFun">调用父级的方法</button>
    </div>
</template>
<script>
    export default{
        // 子组件通过inject接到祖先组件中的provide广播的数据
        inject:['parentData'],
        name: 'child',
        data(){
            return{
            }
        },
        methods:{
           parFun(){
                // 这里直接执行存储下来的方法
               this.parentData.changeNun();
           }
        }
    }
</script>

这种方式适合层级比较深的组件传值,这里的基本原理是,通过给祖先组件配置provide属性,然后把想要传给后代组件的属性值,进行存储;
然后在后代组件中,那个需要拿到传播的数据,可以给组件本身配置injuct属性,来接收想要监听的数据值;

然后就可以进行通信了

4、使用事件总线

此方发可以在任意组件中进行监听当前定义的方法。来实现,组件间相互通信

<!--event-bus.js-->
import Vue from 'vue';
// 这里从创建了一个新的vue实例对象
export const EventBus = new Vue();
<!--parent.vue-->
<template>
    <div>
    </div>
</template>
<script>
// 这里引入事件总线
import { EventBus } from './event-bus';
export default{
    data(){
        return{
            eventBusMsg: ''
        }
    },
    created(){
        // 然后给事件总线绑定一个需要监听的方法,类似于发布订阅者的增加订阅
        EventBus.$on("eventBusMsg", (msg) => {
            console.log(msg);
            this.eventBusMsg = msg;
        });
    },
    beforeDestroy(){
         EventBus.$small("eventBusMsg");
    }
}
</script>
<!--sub.vue后代组件-->
<template>
    <div>
        <button @click="eventBusChange">通过事件总线调用组件的方法</button>
    </div>
</template>
<script>
// 其他组件也需要你引入该插件
import { EventBus } from './event-bus';
export default{
    data(){
    },
    created(){
    },
    methods:{
        eventBusChange(){
            //这里是通过eventBus来调用一个订阅的消息方法,并传入值过去
            EventBus.$emit('eventBusMsg', 'childB');
        }
    }
}
</script>

事件总线的调用方式是:

1.定义一个全局的vue示例并导出;

2.然后在需要监听某个事件的组件中引入event-bus

3.给当前的组件在created方法中增加方法

4.然后子组件可以通过引入event-bus文件然后通过EventBus.$emit方式执行监听的时间方法

5、vuex\localStorage\sessionStorage

还可以使用Vuex、本地存储等方式来实现全局公用。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

  • vue组件通信传值操作示例

    本文实例讲述了vue组件通信传值操作.分享给大家供大家参考,具体如下: 父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> <span>{{parentMessage}}</span> </div> </template> <script> export default{ props: ['parentMes

  • Vue组件化常用方法之组件传值与通信

    相关知识点 父组件传值到子组件 子组件传值到父组件 兄弟组件之间传值 祖代和后代之间传值 任意两个组件之间传值 父组件传值到子组件 父组件传值到子组件基本方法有三个,分别为: 属性 props 引用 $refs 子元素 $children 日常开发中,我们用到 props 和 $refs 频率比较多,$children 相对较少些(我就没怎么使用过~). 属性 props 在父组件中添加属性,在子组件中接收使用,例如: 父组件: <HelloWorld msg="Welcome to Yo

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • Vue组件通信中非父子组件传值知识点总结

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考:  https://www.jb51.net/article/121806.htm 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数据,又可以帮你接

  • vue中组件之间相互通信传值的几种方法详解

    目录 vue中组件之间相互通讯传值的方式 1.子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现 2.父组件主动获取子组件数据 3.使用provide/inject方法实现 4.使用事件总线 5.vuex\localStorage\sessionStorage 总结 vue中组件之间相互通讯传值的方式 我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用. 我们在封装组件的时候经常会留有一些预留的接口,

  • Javaweb中Request获取表单数据的四种方法详解

    目录 表单代码 request.getParamter(String name);通过name获取值 request.getParamterValues(String name);通过name获取value值(一般用于复选框获取值) 代码片段 request.getParameterNames();直接获取表单所有对象的name值,返回值是枚举集合 request.getParameterMap();直接获取表单所有对象的name值以及数据 表单代码 <!DOCTYPE html> <h

  • Android OnCreate()中获取控件高度与宽度两种方法详解

    Android OnCreate()中获取控件高度与宽度 试过在OnCreate()中获取控件高度与宽度的童鞋都知道,getWidth()与getHeight()方法返回是0,具体原因 看一下Activity的生命周期 就会明白. 上代码: 方法一: int w = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED); int h = View.MeasureSpec.makeMeasureSpec(0,View.Me

  • Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • vue-vuex中使用commit提交mutation来修改state的方法详解

    在vuex中,关于修改state的方式,需要commit提交mutation.官方文档中有这么一句话: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. 为了搞清楚其原因,查阅了很多资料,发现其它人在做vuex的源码解析的时候,并没有将这点说的很明白. 所以只好自己去查看vuex的源码,并且自己做demo进行验证. 但是试验后,发现直接修改state时,store中的state能够改变,并且是响应式的,并没有报错.跟commit提交mutation的方式没啥区别. 后

  • 对DataFrame数据中的重复行,利用groupby累加合并的方法详解

    pandas读取一组数据,可能存在重复索引,虽然可以利用drop_duplicate直接删除,但是会删除重要信息. 比如同一ID用户,多次登录学习时间.要计算该用户总共''学习时间'',就要把重复的ID的''学习时间''累加. 可以结合groupby和sum函数完成该操作. 实例如下: 新建一个DataFrame,计算每个 id 的总共学习时间.其中 id 为one/two的存在重复学习时间.先利用 groupby 按照键 id 分组,然后利用sum()函数求和,即可得到每个id的总共学习时间.

  • 对Python中实现两个数的值交换的集中方法详解

    如下所示: #定义两个数并赋值 x = 1 y = 2 #第1种方式:引入第三方变量 z = 0 z = x x = y y = z #第2种:不引入第三方变量 x = x+y y = x-y x = x-y #第3种:推荐 x,y = y,x print("x=%d,y=%d"%(x,y)) 以上这篇对Python中实现两个数的值交换的集中方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 关于Python 中的时间处理包datetime和arrow的方法详解

    在获取贝壳分的时候用到了时间处理函数,想要获取上个月时间包括年.月.日等 # 方法一: today = datetime.date.today() # 1. 获取「今天」 first = today.replace(day=1) # 2. 获取当前月的第一天 last_month = first - datetime.timedelta(days=1) # 3. 减一天,得到上个月的最后一天 print(last_month.strftime("%Y%m")) # 4. 格式化成指定形

随机推荐