Vue组件之间的通信方式详细讲解

2024-07-30 19:51:36

前言

在前面，我们已经了解了vue的组件以及vue组件之间的层级关系，这个在博主的往期博客，感兴趣的可以往前挪，地址是：

1、vue组件

2、vue组件的层级关系

本文主要编写记录的是，组件之间的通信的模式以及通信的方式，我们的组件之间只能调用自己的属性和自己的方法，不能调用其他组件的属性以及方法，不过就是调用的话，那就是要用到数据通信，那样才能调用该组件的属性和方法。

我们的vue组件含有的最突出的是跨组件的数据流、自定义的事件通信以及构建工具集成的。

一、父级传数据给子级

1、传输固定的具体数据

我们通过一个代码实例了解，父组件传递具体的数据给到子组件。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>层级关系</title>
</head>
<body>
    <div id="app">
      <child msg="**大学"></child>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('child',{
            props:['msg'],
            template:
            `<h1>{{msg}}学生教务系统</h1>`
        });
var  vm = new Vue({
    el:"#app",
})
    </script>
</body>
</html>

运行结果：

我们可以看到一个这样的界面，当在child组件通过props：['msg']定义了一个属性msg，根组件就会调用child组件，将属性msg里面的‘**大学’，把这个数据传给child组件，所以这个组件才能显示出来，因为这个值是固定的且具体的值，不能被改变的，所以这种方法又称为字面量传值。

2、动态语法

动态语法其实很简单，就类似于使用v-bind将html的特性绑定到一个表达式中，可以使用v-bind将动态的props绑定到父级组件的这些数据上面。当父级组件的数据发生变化的时候，就将这一些变化发送到子组件当中。这个不难理解，我们还是通过一些代码来了解一下：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
      <child v-bind:msg='stage':open='open'></child>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('child',{
            template:
            <div><h1>{{msg}}学生教务系统</h1>
                <h2 v-show='open'>放假了！进不了！！！</h2></div>`,
                props:['msg','open'],
        });
var  vm = new Vue({
    el:"#app",
     data:{
        stage:"放假",
        open:true
     }
})
    </script>
</body>
</html>

运行结果：

我们可以看到child组件当中，已经定义了msg和open两个教务系统的属性，在父组件里面已经使用了child组件，当中使用了v-bind指令来绑定我们这两个属性，用来接收来自父组件的数据。我们组件之间可以是props指定验证要求，这个时候props得到的值是一个对象的值。

3、子组件调用父组件

这里我们可以解释到父级组件调用我们子组件的时候通过绑定事件的时候，将这个方法传递给子组件，可以将子组件中通过$emit触发这个事件。这个还是不难理解，我们可以通过代码的方式来了解：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
      <child v-on:fmethod="show"></child>
      <p>{{msg}}</p>
    </div>
<template id="n1">
    <div><button @click="myclick">调用父组件</button></div>
</template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
    var clild = {
    template:"#n1",
    methods:{
        myclick(){this.$emit('fmethod');}
    }
};
var  vm = new Vue({
    el:"#app",
     data:{msg:""},
     methods:{
        show(){this.msg="这里是父级组件的方法";}
     },
     components:{child:clild}
})
    </script>
</body>
</html>

运行结果：当我们点击的时候就可以使得父级组件的show方法被执行的。如下：

二、子级传数据给父级

1、使用自定义事件

当父级组件调用子级组件的时候，我们先通过一个v-on指令进行一个自定义事件的绑定，在子组件当中可以通过$emit将这个函数事件触发，然后再父级组件中定义的处理函数的方法，通过这样的传递参数将数据传给父级组件，这个还是很简单可以理解的，我们通过代码示例的方式来了解我们这一个定义，

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
      <child v-on:fmethod="show"></child>
      <p>{{msg}}</p>
    </div>
<template id="n1">
    <div><button @click="myclick">调用父组件的方法</button></div>
</template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
    var clild = {
    template:"#n1",
    data:function(){return {msg:"这里是来自子级组件的数据"}},
    methods:{
        myclick(){this.$emit('fmethod',this.msg);}
    }
};
var  vm = new Vue({
    el:"#app",
     data:{msg:""},
     methods:{
        show(data){this.msg=data;}
     },
     components:{child:clild}
})
    </script>
</body>
</html>

运行结果：

当单击按钮的时候，执行myclick的方法，这个方法中的this.$emit这个命令就会触发fmethod这个事件，进行调用父组件里面show显示这个方法，再使得this.msg作为实参传进去。如下：

2、$refs的使用

这个概念的时候，我们能知道在调用子级组件的时候使用ref属性，通过$refs得到ref的属性值对应组件的实例，得到后父级组件就可以使用子组件，从而控制子组件的数据，同时还可以得到子组件的方法，概念很简单，我们可以通过代码方式了解：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
      <p>{{msg}}</p><button v-on:click="My_click()">访问子组件的数据和方法</button>
      <child ref="child1"></child>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
    var clild = {
    template:"#n1",
    data:function(){return {msg:"这里是来自子级组件的数据"}},
    methods:{
        myclick(){this.$emit('fmethod',this.msg);}
    }
};
var  vm = new Vue({
    el:"#app",
     data:{msg:"根组件data"},
     methods:{
        My_click(){
            console.log(this.$emit.child.msg1);
            this.$refs.child.show("已经被调用");
        }
     },
     components:{
        child:{
            template:'<p>{{msg1}}</p>',
            data:function(){
                return {msg1:"子组件数据"}
            },
            methods:{
                show(data){
                    console.log("子组件方法"+data)
                }
            }
        }
     }
})
    </script>
</body>
</html>

运行结果：

3、同级别组价以及任意组件之间的数据传递

我们已经知道了父子组件之前的数据传递，那么现在还得了解一下同级组件，时间总线可以用于任何组件之间的通信，以便用于来用解决跨级别传递的方法。

我们在程序代码中，要先定义事件总线，在使用事件总线的传递数据的两个组件中，一个组件可以使用侦听时间；另一个组件又可以使用触发事件。我们还是可以通过一个实例代码了解一下：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
     <component-one></component-one>
     <component-two></component-two>
    </div>
     <template id="n1">
        <div style="border: 1px solid blue;padding: 10px;margin: 10px;">
        我是哥哥，想要获取到弟弟的数据:{{msg1}}
        </div>
     </template>
     <template id="n2">
        <div style="border: 1px solid blue;padding: 10px;margin: 10px;">
        我是弟弟
        <button @click="send">把弟弟的数据传给哥哥</button>
        </div>
     </template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var bus = new Vue({});
var  vm = new Vue({
    el:"#app",
    components:{
        "component-one":{
            template:'#n1',
            data(){
                return {msg1:""}
            },
            mounted(){
                bus.$on("data-transmit",msgs2=>{
                    this.msg1 = msgs2
                })
            },
        },
        "component-two":{
            template:"#n2",
            data(){return {msg2:"我是弟弟的数据"}},
            methods:{
                send(){
                    bus.$emit("data-transmit",this.msg2);
                }
            }
        }
    }
})
    </script>
</body>
</html>

运行结果：单击按钮就可以把弟弟（组件）里面数据传给到哥哥（组件）。

到此这篇关于Vue组件之间的通信方式详细讲解的文章就介绍到这了,更多相关Vue组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

一起来学习Vue的组件间通信方式

props 父组件可以通过props向下传递数据给子组件静态的Props 通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的动态Props 在模版中要动态的绑定父组件的数据到子模版的props,与绑定任何普通的HTML特性相类似,用v-bind,每当父组件的数据发生变化的时候,该变化会传导给子组件 props验证可以为组件的props指定验证规则,如果传入的数据不符合规则,Vue会发出警告 props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA:
Vue组件之间的通信方式(推荐!)

目录一.组件间通信的概念二.组件间通信解决了什么二.组件间通信的分类三.组件间通信的方案 props传递数据 $emit 触发自定义事件 ref EventBus parent或parent 或parent或 root attrs与attrs 与attrs与 listeners provide 与 inject vuex 小结总结一.组件间通信的概念开始之前,我们把组件间通信这个词进行拆分组件通信都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组
Vue2和Vue3的10种组件通信方式梳理

目录 props emit attrs和listeners provide/inject parent/children expose&ref EventBus/mitt 写在最后 Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式. 其中将要实现的通信方式如下表所示: 方式 Vue2 Vue3 父传子 props props 子传父 $emit emits 父传子
Vue非父子组件之间的通信方式详解

目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线总结非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信. 这里我们主要讲两种方式: Provide/Inject: 全局事件总线: 1.Provide和Inject 1.1基本使用 Provide/Inject用于非父子组件之间共享数据: 比如有一些深度嵌套的组件
一文搞懂Vue2中的组件通信

目录 vue 组件通信方式 1.props传参 2.emit,on通信 3.$ref,$children实例通信 4.$parent通信 5.插槽通信(一般不用) 6.$attr,$listener深层双向通信 7.provide,inject依赖注入深层次单向通信 8.$bus事件总线全局通信 vue 组件通信方式 1.父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 2.子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改
Vue组件通信方式(父传子、子传父、兄弟通信)

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

目录一.组件间的通信方式分类二.props传递数据三.$emit 触发自定义事件四.ref标记五.EventBus事件总线六.$parent 或 $root 七.vuex 八.总结一.组件间的通信方式分类父子组件之间的通信: 兄弟组件之间的通信: 祖孙与后代组件之间的通信: 非关系组件之间的通信. 二.props传递数据适用场景:父组件传递数据给子组件: 子组件设置props属性,定义接收父组件传递过来的参数: 父组件在使用子组件标签中通过字面量来传递值 Person.vue
老生常谈vue3组件通信方式

目录 vue3七种组件通信方式 1. Props方式 2. emit方式 3. v-model方式 4.Refs 5. provide/inject 6. eventBus 7. vuex/pinia vue3七种组件通信方式面试题经常会问到vue3组件间的通信方式,下文列举了七种常见的通信方式. props emit v-model refs provide/inject eventBus Vuex4/pinia(vuex5) 1. Props方式父组件以数据绑定的形式声明要传递的数据,子
Vue组件之间的通信方式详细讲解

目录前言一.父级传数据给子级 1.传输固定的具体数据 2.动态语法 3.子组件调用父组件二.子级传数据给父级 1.使用自定义事件 2.$refs的使用 3.同级别组价以及任意组件之间的数据传递前言在前面,我们已经了解了vue的组件以及vue组件之间的层级关系,这个在博主的往期博客,感兴趣的可以往前挪,地址是: 1.vue组件 2.vue组件的层级关系本文主要编写记录的是,组件之间的通信的模式以及通信的方式,我们的组件之间只能调用自己的属性和自己的方法,不能调用其他组件的属性以及方法,
VUE组件传参超详细讲解

目录 Vue.cli 中怎样使用自定义的组件 Vue 组件如何进行传值的父组件向子组件传递数据子组件向父组件传递数据非父子组件之间传递数据父传子例子子传父例子 Vue组件data为什么必须是函数组件的命名规范 Vue 组件里的定时器要怎么销毁 Vue.cli 中怎样使用自定义的组件第一步:在 components 目录新建你的组件文件(CounterCom.vue),script一定要export default {} 第二步:在需要用的页面(组件)中导入: import Coun
Vue组件与生命周期详细讲解

目录写在前面生命周期图解总结写在前面 Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统.vue实例在渲染成html的时候往往要经过以下的步骤: 读取数据和方法,设置数据绑定和监听解析template 将实例挂载到Dom,并将实例状态和视图绑定,在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改. 生命周期 beforeCreate vue实例初始化,数据监听和方法属性挂载之前调用 created 数据监听和方法属性挂载之后调用,是最
Vue组件的渲染流程详细讲解

目录引言与例子举一个工作中能用到的例子: 实现 extend 执行流程 1. 注册流程(以Vue.component()祖册为例子): 2. 执行流程 3. 渲染流程总结注: 本文目的是通过源码方向来讲component组件的渲染流程引言与例子在我们创建Vue实例时,是通过new Vue.this._init(options)方法来进行初始化,然后再执行$mount等,那么在组件渲染时,可不可以让组件使用同一套逻辑去处理呢? 答:当然是可以的,需要使用到Vue.extend方法来实现
vue组件之间通信方式实例总结【8种方式】

本文实例总结了vue组件之间通信方式.分享给大家供大家参考,具体如下: 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <in
Vue组件之间四种通信方式详解

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法父子组件通信父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态父组件定义,声明状态 { name: 'baidu.com' } 以及可以改
通过实例讲解vue组件之间的传值

目录前言 1.父组件向子组件进行传值 2.子组件向父组件进行传值 3.非父子组件之间的传值总结前言目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法: 父传子子传父非父子传值注意: 父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 接下来,我们会通过实例代码来看的更清晰,理解更容易
深入了解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,后来随