组件通信

Posted 2020-12-22 vancissell

1.子父组件

　　父组件：

　　bind绑定传值，on事件接收

　　<componentName :keyName = "数据" @keyName = "事件名"/>

1 <switchTempDialog :switchTempShow.sync=‘switchTempShow‘
2                         :selectPoint=‘selectPoint‘
3                         @closeCb=‘closeCb‘>
4 </switchTempDialog>

 

　　子组件：

　　props：{　keyName : types　}接收，　　emit.( 事件名，params）触发

 1 props: {
 2     dialogVisible: Boolean,
 3     selectPoint: Object,
 4     isPoint: {
 5       type: Boolean, default: true
 6     }
 7   },
 8 ...
 9 
10 this.$emit("update:dialogVisible", this.dialogVisible);
11 this.$emit("closeCb");

2.兄弟组件或非父子组件通信

　　bus总线传值

　　将bus挂载到vue.prototype上,相当于给vue添加一个原型链属性，如果该属性为引用类型，则相当于添加了一个全局变量。

　　

// plugin/index.js
import Bus from ‘vue‘;
let install = function (Vue) {
    ... ...
    // 设置eventBus
    Vue.prototype.bus = new Bus();
    ... ...
}

export default {install};

// main.js
import Vue from ‘vue‘;
import plugin from ‘./plugin/index‘;
... ...

Vue.use(plugin);

... ...

组件一定义：

this.bus.$on(‘updateData‘, this.getdata);

组件二调用：

this.bus.$emit(‘updateData‘, {loading: false});

注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况

1 beforeDestroy () {
2         this.bus.$off(‘updateData‘, this.getData);
3     }

3.vuex全局状态管理

4.借助vue.prototype设置全局变量

https://blog.csdn.net/pma934/article/details/86765722

5.$attr和$listen 跨越组件通信

父组件

<template>
  <div>
    <index1 :foo="foo"
            :coo="coo"
            @toSky="toSky"></index1>
  </div>
</template>
<script>
// import index1 from "@/pages/index1"
export default {
  data () {
    return {
      foo: ‘普通通信‘,
      coo: ‘跨组件通信‘
    }
  },
  components: {
    index1: () => import(‘@/pages/index1‘)
    // index1: resolve => { require([‘@/pages/index1‘]), resolve }
  },
  methods: {
    toSky (params) {
      console.log(params)
    }
  }
}
</script>

子组件

<template>
  <div>
    <p>{{foo}}</p>
    <index2 v-bind="$attrs"
            v-on="$listeners"></index2>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  components: {
    index2: () => import(‘@/pages/index2‘)
  },
  props: [
    "foo"
  ],
　// 取消把 $attrs 对象上没在子组件 props 中声明的属性加在子组件的根 html 标签上
  inheritAttrs: false,
}
</script>

孙组件

<template>
  <div>
    <p>coo:{{coo}}</p>
    <button @click="toSky">我要上天</button>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  props: [‘coo‘],
  inheritAttrs: false,
  methods: {
    toSky () {
      this.$emit("toSky", "上天啦")
    }
  }
}
</script>