Vue 组件通信(组件间通信)

1、中央事件总线bus

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <p>{{message}}</p>
            <my-component></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            var bus = new Vue();
            Vue.component(‘my-component‘, {
                template: `<button @click="handleEvent">传递事件</button>`,
                methods: {
                    handleEvent: function() {
                        bus.$emit(‘on-message‘, ‘来自组件my-component的内容‘)
                    }
                }
            })
            new Vue({
                el: "#app",
                data: {
                    message: ‘‘
                },
                mounted: function() {
                    var _this = this;
                    //监听来自bus实例的事件
                    bus.$on(‘on-message‘, function(msg) {
                        _this.message = msg;
                    })
                }
            })
        </script>
    </body>

</html>

2、父链

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <p>{{message}}</p>
            <my-component></my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component(‘my-component‘, {
                template: `<button @click="handleEvent">通过父链修改数据</button>`,
                methods: {
                    handleEvent: function() {
                        this.$parent.message = ‘来自组件my-component的内容‘
                    }
                }
            })
            new Vue({
                el: "#app",
                data: {
                    message: ‘‘
                }
            })
        </script>
    </body>

</html>

注:尽量少用,父子组件最好通过props和$emit来通信

3、子组件索引

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <button @click="handleRef">获取子组件内容</button>
            <p>父组件:{{message}}</p>
            <my-component ref=‘comA‘></my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component(‘my-component‘, {
                template: ‘<div>子组件</div>‘,
                   data:function(){
                       return {
                           message:‘子组件内容‘
                       }
                   }
            });
            new Vue({
                el: "#app",
                data:{
                    message:‘‘
                },
                   methods:{
                       handleRef:function(){
                           var msg = this.$refs.comA.message;
                           this.message = msg;
                       }
                   }
            })
        </script>
    </body>

</html>

注:仅仅作为直接访问子组件的应急方案,避免在模板或者计算属性中使用$refs.

时间: 2024-10-07 18:22:47

Vue 组件通信(组件间通信)的相关文章

Android各组件/控件间通信利器之EventBus

实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变.举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对于每个糗事而言,布局基本一致,在详情页点击了个赞,赞的数量增加,同时赞的图标发生了变化,此时返回到列表页,此糗事上的赞图标以及数量与刚刚详情页的需要保持一致.在举一个例子,对于多个底部导航tab下的资讯类阅读app,在咨询详情页点击了收藏,然后收藏成功,此时回到底部tab中的个人中心,假如个人中心中有我

vue组件间通信

组件间通信 vue组件之间的通信方式包括父子通信.子父通信和非父子通信 父子间通信 <!-- 在父组件中使用子组件 --> <!-- 在父组件中向子组件传递数据,需要在子组件上面添加属性,使其值等于要传递的数据 --> <Child :childData="childData"></Child> // 父组件 // 引入子组件 import Child from './Child' export default { // 注册子组件 co

NSThread&amp;线程间通信

创建和启动线程 一个NSThread对象就代表一条线程 创建.启动线程 NSThread *thread = [[NSThread alloc] initWithTarget:self selector:@selector(run) object:nil]; [thread start]; // 线程一启动,就会在线程thread中执行self的run方法 主线程相关用法 + (NSThread *)mainThread; // 获得主线程 - (BOOL)isMainThread; // 是否

【黑马】程序员————多线程(二)单例设计模式、线程间通信,JDK1.5互斥锁

------Java培训.Android培训.iOS培训..Net培训.期待与您交流!----- 一.单例设计模式 单例设计模式的意义: A.保证类在内存中只有一个对象,不提供外部访问方式,构造函数用private修饰. B.提供公共方法(static修饰,类的静态方法),获取类的实例.单例设计模式分为饿汉和懒汉两种模式. 饿汉式&懒汉式 class Test33 { public static void main(String[] args) { Fanjianan.getInstance()

进程间通信与线程间通信

序 今天被问及进程间通信的问题,发现自己了解的并不够,所以,对此好好总结一番~ 操作系统的主要任务是管理计算机的软件.硬件资源.现代操作系统的主要特点是多用户和多任务,也就是程序的并行执行,windows如此linux也是如此.所以操作系统就借助于进程来管理计算机的软.硬件资源,支持多任务的并行执行.要并行执行就需要多进程.多线程.因此多进程和多线程间为了完成一定的任务,就需要进行一定的通信.而线程间通信又和进程间的通信不同.由于进程的数据空间相对独立而线程是共享数据空间的,彼此通信机制也很不同

进程通信,线程通信,同步方式

一.进程间通信 进程间的通信,它的数据空间的独立性决定了它的通信相对比较复杂,需要通过操作系统.以前进程间的通信只能是单机版的,现在操作系统都继承了基于套接字(socket)的进程间的通信机制.这样进程间的通信就不局限于单台计算机了,实现了网络通信.进程的通信机制主要有:管道.有名管道.消息队列.信号量.共享空间.信号.套接字. 1.信号 信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是异步的,一个进程不必通过任何操作来等待信号

vue组件父子间通信之综合练习--假的聊天室

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>组件父子间通信之综合练习</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>

vue组件间通信子与父

二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 }} ②绑定事件处理函数事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发事件 事件名,值this.$emit('my

vue组件父子间通信02

三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"></child-component> ②根据指定的引用的名字 找到子组件的实例对象this.$refs.mySon 子组件要想获取父组件的数据:①直接读取this.$parent :::通过this.$refs拿到子组件的数据 <!doctype html> <html>

vue 和 react 组件间通信方法对比

vue 和 react 组件间通信方法对比 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).this.$refs.this.$children props 子组件 => 父组件 自定义事件($emit.$on)(推荐).this.$parent 回调函数(推荐) 非父子组件(兄弟组件.跨级组件) bus 高阶组件(推荐).自定义事件.context 原文地址:https://www.cnblogs.com/cag2050/p/9054840.html