vue组件之间通信实录

李昌杰发布于2019-08-20 16:46 / 493人阅读

摘要：一般在的开发中都是模块化开发，所以当涉及到兄弟组件之间的通信的时候，我们可以在入口文件中事先声明一个全局的事件巴士即一个全局的供实例，然后通过他来传导数据。

1、在vue中父组件是通过props传递数据给子组件

子组件只接受在子组件中定义过的props的值，

Vue.component("child-component", {
  props: ["prop1", "prop2"], // 定义接收哪些 props
  template: "{{prop1 + prop2}}",
  ...
}

2、父组件调用子组件属性或方法
首先在组件的根元素上通过ref给取个名字，例如：

然后父组件就可以通过该名称获取到这个组件对象，从而调用里面的属性与方法：

var comp = this.$refs.name;
name.attr;
name.method();

父组件可以通过$children，获取到所有的直接子组件，不包括孙组件；不保证顺序，不是响应式的

3、子组件传递数据给父组件----自定义事件
父组件通过v-on在子组件使用的地方监听子组件触发的事件：


  {{ total }}
//increment是子组件中的事件，意思就是在子组件中increment执行的时候，执行父组件中的incrementTotal方法
  
  

new Vue({
  el: "#counter-event-example",
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (arg) {
      this.total += 1
    }
  }
})

然后在子组件中使用$emit()主动抛出事件：

Vue.component("button-counter", {
  template: "",
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit("increment")
       //传递参数
       //this.$emit("increment",arg) 
    }
  },
})

当然如果你想在组件根元素上使用原生事件，可以使用.native修饰符
另外子组件调用父组件事件则可以使用$parent或者$root，详见vue文档；

4、兄弟组件之间通信

vue中兄弟组件之间的通信网上大部分说法都是使用vuex，但是对于小白来说，vuex的初始理解门槛还是有的，所以这里主要用事件巴士讲解一下。

一般在vue的开发中都是模块化开发，所以当涉及到兄弟组件之间的通信的时候，我们可以在入口文件中事先声明一个全局的事件巴士（即一个全局的供vue实例），然后通过他来传导数据。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import FastClick from "fastclick";
import router from "./router";
import Vue_resource from "vue-resource";
import axios from "axios";
import "./common/style/index.less";
Vue.config.productionTip = false;
FastClick.attach(document.body);
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    render: h => h(App),
    data: {
        eventHub: new Vue()
    }
});
router.push("/goods");

然后便可以全局的使用该实例，进行数据的传输，如下：

//在组件a中触发事件add，并且传递参数1
this.$root.eventHub.$emit("add",1);
//在组件b中监听事件的触发，并处理参数
this.$root.eventHub.$on("add",function(data) {
  //...
})

云服务器 GPU云服务器组件之间通信 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83144.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
实录分享|kubernetes 在腾讯游戏的应用实践

摘要：大家好今天我分享的主题与游戏行业相关，为大家介绍的是在腾讯游戏中的应用实践。随着技术的兴起，我们开始调研在游戏容器化方面的应用。也就是说，将不同游戏业务部署到同一台母机，采用绑定核的方式。在母机上架部署时，创建设备和设备并将它们进行关联。今天小数的推送内容来自腾讯互娱高级工程师黄惠波，让我们一起来看看吧~~~ 黄惠波，腾讯互娱高级工程师目前主要负责游戏计算资源容器化平台的研发工作，包...

DangoSky 2019-07-01 16:30 评论0 收藏0
vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0