文档章节

Vue组件间通信(非VueX)

杜宝
 杜宝
发布于 2017/08/31 08:33
字数 325
阅读 43
收藏 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
博文 41
码字总数 31704
作品 0
兰州
私信 提问
详解如何实现一个简单的 vuex

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

嫣然丫丫丫
2018/12/12
0
0
vue中8种组件通信方式, 值得收藏!

之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要...

大西轰已在服务区
07/11
0
0
vue组件间通信六种方式(完整版)

前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和...

浪里行舟
05/17
0
0
Vue案例引发的「嵌套组件」通信的简单方式

我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。 既然项目中存在很多的组件,而且又是相对独立的,但组件间肯定...

六小登登
02/27
0
0
Vue2.0学习(三)--Vue数据通信详解

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

人心思动
2018/08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部