组件通信

Posted vancissell

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了组件通信相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于组件通信的主要内容,如果未能解决你的问题,请参考以下文章

在tablayout片段之间进行通信[重复]

与另一个片段通信的片段接口

Android开发——UI_片段

无法通过接口获取与片段通信的活动

VsCode 代码片段-提升研发效率

如何在嵌套片段内的两个子片段之间进行通信