一、说说通信

通信,简言之,交流信息。交流结束后,把信息放在哪里,这是一个值得思考的问题。vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性。

1、用state的场景

vuex解决多组件共享数据和组件间通信问题;

全局共享的状态,放在state中;

后端返回的数据,放在state中;

处理数据修改数据,放在state中。

2、用data的场景

数据渲染页面,放在data中;

页面中不需要持久化的数据,放在data中。

二、父子组件间通信

1、父组件给子组件传消息

//父组件,给子组件的props值赋值
<com-a ftoa="一朵花"></com-a>

Vue.component('com-a',{
   //全局注册子组件A
})
//子组件
<h3>父亲给我了,{{ ftoa }}</h3>

props:['ftoa']

2、子组件给父组件传事件

//子组件
<input type="button" value="A和父亲说话" @click="eventAf">

methods:{
    eventAf(){
      this.$emit('a-f-msg',this.a);
    }
  }
//父组件,用v-on监听子组件
<com-a v-on:a-f-msg="listenToa"></com-a>
<h3>子组件A想告诉父亲,{{ tofather.aword }}</h3>

methods:{
    listenToa(adata){
      this.tofather.aword = adata;
    }
  }

三、兄弟组件间通信

//事件总线
const bus= new Vue();

1、子组件A给子组件B发事件

//子组件A
<input type="button" value="把值传给B" @click="eventAb">

methods:{
    eventAb(){
      bus.$emit('a-b-msg',this.a);
    }
  }

2、子组件B监听接收子组件A发的事件

//子组件B
<h4>A传过来的数据是:{{ a }}</h4>

mounted(){
    var _this = this;
    bus.$on('a-b-msg',(a)=>{
      _this.a = a;
    });
  }

3、vuex

适用于复杂的组件通信。

四、前往代码

1、简单的组件通信(vue)

2、简单的组件通信(vue单文件组件)

3、复杂的组件通信(vue)

4、复杂的组件通信(vue单文件组件)

五、底层原理

vue组件通信那些事儿的更多相关文章

  1. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  2. vue 组件通信

    组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...

  3. VUE 组件通信总结

    1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...

  4. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  5. vue 组件通信传值

    父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> < ...

  6. Vue组件通信之Bus

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...

  7. Vue组件通信的几种方法

    上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...

  8. vue组件通信之父子组件通信

    准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html  vue 脚手架安装及新建项目 ...

  9. vue组件通信之非父子组件通信

    什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit  触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on  监听当前实例上的自定义事件.事件可以 ...

随机推荐

  1. ActiveMQ使用的设计模式

    注:接收不需要连接池,而发送需要连接池,是因为,接收在启动项目时就要注册监听,数目是固定的,而发送则会随着时间数目不断在变动,需要连接池,性能更优. 重点代码: private static void ...

  2. 关于使用summernote编辑器提示内容无法汉化临时解决办法

    原因:使用汉化summernote-zh-CN.js文件无法汉化 $('#summernote').summernote({ lang: 'zh-CN' }); 解决方法: 打开summernote. ...

  3. CentOS6.9安装Kafka

    先设置jdk1.8 vi /etc/profile export JAVA_HOME=/usr/local/jdkexport JRE_HOME=/usr/local/jdk/jreexport CL ...

  4. [转] 理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  5. javaScript事件(八)事件类型之变动事件

    DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...

  6. 常用js正则表达式大全

    常用js正则表达式大全.一.校验数字的js正则表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和 ...

  7. C#操作windows服务

    本文主要说明了Windows服务的安装.卸载.启动.停止.获取服务安装路径.获取服务状态.检查服务是否存在.获取服务版本. 我们需要引用命名空间using System.Configuration.I ...

  8. net core体系-web应用程序-4net core2.0大白话带你入门-3asp.net core项目架构和配置文件解读

    asp.net core web项目目录解读   Connected Services 和传统.net web项目相比,它的功能类似于添加webservice或者wcf service的引用.暂时用不 ...

  9. windows docker常用命令

    关键词 示例 作用 attach sudo docker run -itd ubuntu:14.04 /bin/bash 进入容器 exec docker exec -it mysql bash 在容 ...

  10. UOJ#207. 共价大爷游长沙 LCT

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ207.html 题解 第一次听说 LCT 还可以维护子树信息. 首先对于每一条路径 rand 一个值,分别 ...