vue的组件通信

最新推荐文章于 2024-08-14 20:13:10 发布
最新推荐文章于 2024-08-14 20:13:10 发布
阅读量67 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzsrlndm/article/details/120629646
版权

Vue组件 父子通信 自定义事件 事件总线 数据传递
关键词由CSDN通过智能技术生成

1.父子通信

父子之间通信，在子组件中可以接收父组件传入的值：基于属性传递 通过props接收；

通过props接受的属性和data数据一样，是直接挂载到实例上的。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .panel {
            width: 300px;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <div class="container">
            <vote v-for="(item,index) in list" :key="index" :title="item" :num="'89'">                          </vote>    
        </div>
    </div>
    <template id="Vote">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                   {{title}}---{{num}}
                </h3>
            </div>
            <content-vote :num='num'></content-vote>
            <footer-vote></footer-vote>
        </div>
    </template>
 
    <template id="ContentVote">
        <div class="panel-body">
            <div class="list-group">
                <div class="list-group-item">支持人数：{{num}}</div>
                <div class="list-group-item">反对人数：10</div>
                <div class="list-group-item">支持率：90%</div>
            </div>
        </div>
    </template>
 
    <template id="FooterVote">
        <div class="panel-footer text-center">
            <button class="btn btn-success">支持</button>
            <button class="btn btn-danger">反对</button>
        </div>
    </template>
    <script>
        const ContentVote={
            template: '#ContentVote',
            props:['num']
 
        }
        const FooterVote={
            template: '#FooterVote'
 
        }
        Vue.component('Vote', {
            template: '#Vote',
            props:['title','num'],
            components: {
                ContentVote,
                FooterVote
            },
            created() {
                console.log(this.a,this.title);
            },
        })
 
        let vm = new Vue({
            el: '#app',
            data:{
                list:['李白','马超','关羽']
            }
        })
    </script>
</body>
 
</html>

2.子传父是通过基于自定义事件传递，在子组件中通过$emit接收 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>父组件中的num: {{num}}</h2>
        <my-component :num="num" @parentEvent="add" ></my-component>
    </div>
    <template id="MyComponent">
        <div>
            <p>子组件中的num: {{num}}</p>
            <p><button @click="  $emit('parentevent',n)">让num自加</button></p>
        </div>
    </template>
    <script>
        Vue.component('MyComponent',{ //注册全局组件
            data(){
                return {
                    n:30
                }
            },
            template:'#MyComponent', //组件的html
            props:['num','add'], //接受父元素传过来的参数
            methods: {
                addFn(n){
                    console.log(123);
                    this.$emit('parentevent',n);
                } 
            },
        })
        let vm=new Vue({
            el:"#app",
            data:{
                num:10
            },
            methods: { //存放方法  事件类
                add(n=1){ //默认值  如果不传参数  默认为1
                    console.log(456)
                    this.num+=n;
                }
            },
 
        })
    </script>
</body>
</html>

 3.兄弟之间传值通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，通过$on监听事件， $emit触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <vote></vote>
        <vote></vote>
        <vote></vote>
    </div>
    <template id="Vote">
        <div>
            <a-component :vue="vue"></a-component>
            <b-component :vue="vue"></b-component>
        </div>
    </template>
    <template id="A">
        <div>
            <p>A组件中的num: {{num}}</p>
        </div>
    </template>
    <template id="B">
        <div>
            <p>B组件:<button @click="addFn(20)">更改A组件的数据</button></p>
        </div>
    </template>
    <script>
        const AComponent={
            template:'#A',
            data(){
                return {
                    num:100
                }
            },
            props:['vue'],
            methods: {
                add(n=1){
                    this.num+=n
                }
            },
            created() {
                this.vue.$on('brotherEvent',this.add)
            },
        }
        const BComponent={
            template:'#B',
            props:['vue'],
            methods: {
                addFn(n){
                    this.vue.$emit('brotherEvent',n)
                }
            },
        }
        
        const Vote={
            template:'#Vote',
            data(){
                return {
                    vue:new Vue
                }
            },
 
            components:{
                AComponent,
                BComponent
            }
        }
        let vm=new Vue({
            el:"#app",
            components:{
                Vote
            }
        })
    </script>
</body>
</html>

 以上就是三种常用的vue组件通信的方式。

 

郁郁青枝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件及组件之间的通信
m0_74331160的博客
01-03 1014
一、Vue脚手架的使用 二、Vue的组件和组件之间的通信
Vue中嵌入html页面并相互通信
qq_42859722的博客
03-22 1万+
vue通过iframe嵌套html页面并且相互之间通信
vue组件通信
csD_Dscnnnnnnn的博客
03-22 1236
vue组件通信
常用的5种Vue组件通信方法
qq_38131840的博客
03-22 1440
Vue组件通信的常用方法
【前端高频面试题--Vue组件通信篇】
qq_45832651的博客
02-08 1855
最全最新Vue组件间通信，面试必问的高频题，等你来看！
Vue组件通信
low神
07-16 903
父子级通信推荐使用：props/$emit、$parent/$children/$refs、$attrs/$listeners 兄弟组件通信推荐使用：$emit/$on、Vuex 无关系组件通信推荐使用：$emit/$on、Vuex、$attrs/$listeners、provide/inject 1、props和$emit（父子组件通信） 子组件使用prop...
vue组件通信provide/inject
m0_56219678的博客
10-05 799
vue组件通信provide/inject，解决深层次组件通信的，如果需要响应式，可以通过对象内属性的方式。
vue组件间通信
热门推荐
江拥羡橙的博客
09-16 3万+
本章我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。组件通信是组件式开发中非常重要的一部分，也是组件式开发中的难点。在学完本章之后，同学们可以通过反复地编写组件来加深印象。组件是 vue 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信，接下来让我们一个个介绍这几种类别的组件通信是如何实现的。
Vue组件通信之bus详解
kirinlau的专栏
11-28 3063
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组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
Vue组件通信的几种实现方法
10-17
以下几种方法是实现Vue组件间通信的常见方式： 1. 父子组件通信 在Vue中，父子组件之间的通信相对直接。父组件可以向子组件传递数据，而子组件则可以向父组件发送消息。 - 通过props向下传递数据：父组件通过在子...
Vue组件通信的四种方式汇总
11-27
本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信...
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 438
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Vue启动时报异常 ‘error:03000086:digital envelope routines::initialization error‘
拥有必珍惜
08-11 345
nodejs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。然后再执行 npm run serve ，则能成功运行项目。将NodeJS切换到17以下版本，再进行启动。方法一：Vscode或者cmd命令行输入命令。使电脑上的 node 版本能适应项目的版本。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 214
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
weixin_44784401的博客
08-09 908
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1020
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
vue-lic（三）
最新发布
qq_64669006的博客
08-14 156
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
vue组件通信友谊聊吧
04-23
关于 Vue 组件通信, 我可以为您提供一些解决方案。Vue 组件通信是指在一个 Vue 应用程序中，不同组件之间共享数据或将数据从一个组件传递到另一个组件的过程。其中包括父组件向子组件传递数据、子组件向父组件传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值