文档章节

Vue组件间通信(非VueX)

杜宝
 杜宝
发布于 2017/08/31 08:33
字数 325
阅读 42
收藏 3

基于以下情况

//父组件
data:{
    //对象形式
}

//子组件
data:function(){
  return {
       //函数形式  
   }
}

例子如下

<div id="app">
   //父组件
    <p>{{total}}</p>
    <mime @increment1="incrementTotal" ref="child" :num-a="total" num-s="total"></mime>
    
    <button type="button" @click="clickref">调用子组件</button>
</div>

//子组件
<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>
<script>
    new Vue({
        el:'#app',
        data :{
            total: 0          
        },
        methods:{
            incrementTotal : function(){
              
            },
            clickref:function(){
              
            }
        },
        components:{
            'mime' :{
                template:'#myInput',
                data : function(){
                    return{
                        counter : 0
                    }
                },
                props:['numA','numS'],
                methods:{
                    add : function(){
                      
                    }
                }
            }
        }
    });
</script>

子组件调用父组件

{{total}}
<mime @increment="incrementTotal"></mime>

<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>

...
<script>
....
data:{
   tatal: 0
},
methods:{
   incrementTotal:function(){
       this.total +=1;
   }
},
components:{
   data : function(){
       return:{
          counter : 0
       }
   },
    methods : {
        add : function(){
             this.counter +=1;
             this.$emit('increment'); //子组件通过 $emit触发父组件的方法 increment   还可以传参   this.$emit('increment' ,this.counter);
        }
   }
}
</script>

父组件调用子组件

<mime ref="child"></mime>
<button type="button" @click="clickref">调用子组件</button>

<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>

...
<script>
....

methods:{
   clickref:function(){
          var child = this.$refs.child; //获取子组件实例
          child.counter = 45;           //改变子组件数据
          child.add(11);                //调用子组件方法 add
       }
},
components:{
   data : function(){
       return:{
          counter : 0
       }
   },
    methods : {
        add : function(num){
             this.counter +=1;
             console.log('接受父组件的值:',num) //num为11
        }
   }
}
</script>

组件间互调


//新建一个空的
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})

总结: 太繁琐,直接用Vuex

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 3
博文 38
码字总数 30525
作品 0
兰州
私信 提问
详解如何实现一个简单的 vuex

首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例)。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅...

嫣然丫丫丫
2018/12/12
0
0
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
2018/07/25
0
0
Vue2.0学习(三)--Vue数据通信详解

一、前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。组件间如何传递数据就显得至关重要。本文尽可能罗列出一些常见的数据...

人心思动
2018/08/09
0
0
EventBus & Vuex?

前几天有盆友在群里问,vue.$emit和$on可以跨组件完成全局通信,那岂不是可以完全代替vuex,为啥还要用vuex呢。 这个问题就要从eventbu事件总线s和vuex起源说起了。 (趁着尤大的vue3.0还在路上...

atheist1
2018/12/07
0
0
真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃
2018/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

redis高级进阶(2)

本篇主要介绍如下内容 1.redis服务器数据库 2.redis对过期键的处理 3.redis持久化策略 1.redis服务器数据库 redis服务器如果不指定数据库的具体数据,默认是16个数据库。 客户端连接到redis...

求是科技
8分钟前
0
0
js时间Date对象介绍及解决getTime转换为8点的问题

前言   在做时间转换的时候,发现用“2016-04-12”转出来的时间戳是 2016-04-12 08:00的时间点,而不是0点。 new Date('2016-04-12').getTime();// 1460419200000 new Date(1460419...

Jack088
17分钟前
1
0
Dubbo 实践,演进及未来规划

Dubbo 整体介绍 Dubbo 是一款高性能,轻量级的 Java RPC 框架。虽然它是以 Java 语言来出名的,但是现在我们生态里面已经有 Go、Python、PHP、Node.JS 等等语言。 Dubbo 是一个 RPC 框架,它...

微笑向暖wx
17分钟前
0
0
用Python建立最简单的web服务器

前提:已装好python,mac默认已有 参考:https://www.cnblogs.com/xuxn/archive/2011/02/14/build-simple-web-server-with-python.html 利用Python自带的包可以建立简单的web服务器。在DOS里...

Liens
19分钟前
0
0
MaxCompute安全管理指南-基础篇

背景及目的 方便和辅助MaxCompute的project owner或安全管理员进行project的日常安全运维,保障数据安全。 MaxCompute有安全模型,DataWorks也有安全模型,当通过DataWorks使用MaxCompute,而...

阿里云官方博客
28分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部