美文网首页
vue 组件间通讯

vue 组件间通讯

作者: 澄澄真可爱 | 来源:发表于2018-03-31 11:39 被阅读0次

总结起来三种方式

一、eventbus

bus.js

import Vue from 'vue'
export default new Vue()//生成一个vue的实例

component1.vue

import Bus from './bus.js'
<script>
export default{
      methods:{
          busToComponent2(){
            let data={a:1,b:2}
            Bus.$emit('callCompoent2',data)
          }
      }
}
</script>

component2.vue

import Bus from './bus.js'
<script>
export default{
      created(){
          Bus.$on('callCompoent2',this.dataCallback) 
      },
      methods:{
            dataCallback(){
              //...dosomething
            }
      }
}
</script>

二、vuex

store.js

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

app.js

import store from './store.js'
new Vue({
    store:store//全局注入,这样才能在所有组件中使用$store
})

com1.vue

import {mapState} from 'vuex'
<template>
   <div>
       <div @click="">通过方法调用<div>
       <div @click="$store.commit('increment')">直接调用<div>
       <div @click="add">通过方法调用<div>
  <div>
</template>
<script>
export default{
    methods:{
          add(){
            this.$store.commit('increment')//方法里面需要加this
             //错误的使用方式 this.$store.state.count++
          }
    }
}
</script>

com2.vue

<template>
     <div>
         {{count1}}<br/>
         {{count2}}
    <div>
</template>
<script>
export default{
    data(){
        return {
            count1:this.$store.state.count  
        }
    
    },
    computed:{
      ...mapState({
            count2:state=>state.count//这里取了个别名count2
      //data里面的count1只会在初始化的时候获取一次,
      //这里的count2是根据store.js里面的count变化而变化的,
      //这是计算属性的强大之处
      })
    }
}
</script>

在组建1中点击按钮 你会发现组件2中的数据count2发生了变化

三、通过层级与组件的name去查找

组件1的name 是table 。子组件name是td 。可以使用this.$parent递归查找最近的name为table父组件,类似于原生的dom对象查找。就算中间有一层tr也没有关系,找到这个组件就可以用$emit()进行通讯了。

相关文章

  • vue 组件间通讯

    总结起来三种方式 一、eventbus bus.js component1.vue component2.vue ...

  • Vue 组件间通讯

    最近回顾前端,先是 React 现在因工作需又要开始 vue 了。开发过程中多半时间我们需要结构,有层次有上下级,...

  • vue组件间通讯

    父子 $emit/on props $parent/children $attrs/listenner $ref ...

  • Vue组件间通讯

    Vue中组件通讯的方式有很多种,每一种应用的场景可能都有一些不一样,我们需要在合适的场景下选择合适的通讯方式。 父...

  • Vue中组件通信(eventBus)

    在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus...

  • [Angular学习笔记]Angular组件通讯

    组件通讯 前端框架,例如extjs,vue,angular等,都是或趋于组件化,所以组件间的通讯,是一个亟需解决的...

  • vue文档集合

    Vue2使用笔记3--父子组件的通信Vue 2.0开发实践(组件间通讯)Event Bus 在Vue中的使用vue...

  • vue组件间的通讯

    父子通信: 父向子传递数据是通过 props,子向父是通过 $emit;通过 $parent / $childre...

  • vue页面和component组件之间双向通讯(续1)

    VUE中父组件、子组件之间的双向通讯可以参见笔者的《vue页面和component组件之间双向通讯[https:/...

  • 快速掌握vue组件间的通讯

    一、父子组件间的通讯 在 Vue 中,父子组件之间的关系可以概述为:props 向下,events 向上。父组件通...

网友评论

      本文标题:vue 组件间通讯

      本文链接:https://www.haomeiwen.com/subject/ujlgcftx.html