vue组件通信方案，简单介绍

vue组件通信方案

组件通信的类型：基本上都是根据组件关系区分类型

• 父子通信
• 跨级通信
• 兄弟通信
• 路由视图级别通信

通信解决方案

• props/$ emit（父子通信）

<k-div :pages=age></k-div>

在组件中使用props接收直接使用

        Vue.component("k-div",{
            props:['pages'],
            template:`  <div>
                            <div>哈哈{{name}}</div>
                            <div>呵呵{{pages}}</div>
                        </div>
                        `,
            //注意  这里
            data(){
                return{
                    name:"这里的data是自身的数据"
                }
            },
        })

• $refs/ref（父子通信）
  Hello 组件定义别名，ref可绑定多个

<Hello ref="helloRef" mage='开课吧'></Hello>

可找到Hello组件中的数据

    methods: {
    fnHome(){
      console.log(this.$refs.helloRef.val) //如果上面不取别名这回(就是没绑定)这里输出是个空对象
       //可ref可绑定 标签、组件等 同时可绑定多个
      console.log(this.$refs.helloRef.fnHello())  //输出我是Hello组件的
    }
  },

• $children/ $parent（父子通信）
  父–>子

    methods: { 
    fnHome(){
      console.log(this.$children[0].val) //children方法以数组形式 父组件拿到子组件的数据
    }
  },

子–>父

  methods: {
    fnHello(){
       console.log(this.$parent.$el) //找到父级数据
       console.log(this.$parent.mag) //直接调取父级数据
    }
  },

• $attrs/ $listeners（父子通信、跨级通信）
  mage=‘开课吧’ 给Hello传递一个字符串 非props特性

<Hello ref="helloRef" mage='开课吧'></Hello>

然而子组件并没有接收，这是可以使用$attrs接收

  methods: {
    fnHello(){
      console.log(this.$attrs) 
    }
  },

要想world组件使用$attrs拿到父级的父级Home组件的数组这里结构一下
给world组件使用v-bind再传，World 组件再接

<World v-bind="$attrs"></World>

• provide/inject（父子通信、跨级通信） 主要开发高阶插件/组件库时使用，并不推普通程序代码(尽量不用)

  // provide是个单独的方法 ，无视组件关系
  provide:{ //在一个组件中定义数据，这里和data数据同级
    prov:300
  },

inject接收

inject:['prov'] //使用inject可以在任意组件接收provide传的值

• eventBus（父子通信、跨级通信、兄弟通信）这种传递方式不考虑组件的关系

  定义eventBus.js文件，内容如下

/*  
   eventBus Vue 事件机制
   eventBus像一个中间商 world he Sister 没有父子的关系 这种传递方式不考虑组件的关系
   原理: $emit(事件名，实参)自定义事件
         $on(事件名，回调函数(形参))   监听事件
*/ 
import Vue from 'vue'
export default new Vue()

在一个组建中定义 注意使用时一定要引入
import eventBus from “@/eventBus.js”

    methods: {
        fnWorld(){  
            // 传递方 定义 事件 这里点击之后在有abc事件
            eventBus.$emit("abc",200)
        }
    },

另外一个组件中接收

    created(){ //监听一定要写在定义之前 
        eventBus.$on('abc',v=>{  //接收方 on接收
            this.val = v    //这里的逻辑 组件创建的时候就用created监听，监听到就存下    //fnSister 点击的时候输出
        })                
    },

以上的通讯方式只能传递一些小的轻量级的数据

• vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）这里今天不介绍
• localStorage/sessionStorage等基于浏览器客户端的存储（父子通信、跨级通信、兄弟通信、路由视图级别通信）根据场景使用