vue 组件通讯

组件通讯的方案

  1. 通过 props 传递 (父子组件传值)
  2. 通过 $emit 触发 父组件自定义事件
  3. 父组件使用 ref 访问子组件实例
  4. EventBus :需要中间文件,$emit触发事件,$on监听
  5. $parent 或者 $root : 可以利用祖先组件搭桥
    • this.$parent.on('add',this.add) 监听事件
    • this.$parent.emit('add')触发事件
  6. $children
  7. $attrs 与 $listeners (可以访问未在props接收的属性和方法)
  8. Provide(祖先提供) 与 Inject (后代注入)
  9. Vuex

总结:

  1. 父子: props 与 $emit进行传递,也可选择ref
  2. 兄弟:$bus,$parent
  3. 祖先与后代:$attrs与$listeners 或者 Provide与 Inject
  4. 复杂关系: vuex存放共享的变量

demo

  1. 父子: props 与 $emit进行传递,也可选择ref
// parent.vue
<Children ref="child" :msg=msg @handleClick="handleClick">Children>
// JS部分
<script>
// $refs可以访问子组件的属性和方法
console.log(this.$refs.child.str) // abc
script>
// Children.vue  只写核心代码,不是完整组件
<template>
<div @click="$emit('handleClick', 'good')">
{{mst}}
<div>
template>
<script>
props: ['msg', 'handleClick']
data(){
	return {str: 'abc'}
}
script>

  1. 兄弟:$bus,$parent
// evenBus.js  
// 方法一:创建一个中央时间总线类 
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  // 把事件以{fnName: []}存起来
  $on(fnName, fn) {  
    this.callbacks[fnName] = this.callbacks[fnName] || [];  
    this.callbacks[fnName].push(fn);  
  }  
  // 通过方法名调用
  $emit(fnName, args) {  
    if (this.callbacks[fnName]) {  
      this.callbacks[fnName].forEach((cb) => cb(args));  
    }  
  }  
}  
  
// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上 
 
// 方法二:Vue已经实现了Bus的功能,可以直接引入使用
import Vue from 'vue'
Vue.prototype.$bus = new Vue() 
// 使用----------------------------------------------------------
// Com1.vue 添加事件
this.$bus.$on('foo', this.handle)  
// Com2.vue 触发事件
this.$bus.$emit('foo')  

  1. 祖先与后代:$attrs与$listeners 或者 Provide与 Inject
// parent.vue ---------------------->
<Child foo="foo" @testEvent="testEvent"/> 
 
// Child.vue:并未在props中声明foo  -------------------->
<p>{{$attrs.foo}}</p>  
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  

// Grandson.vue -------------------------------->
<div @click="$emit('testEvent', 'msg from grandson')">  
{{foo}}  
</div>  
// parent.vue ---------------------->
<Child/>
provide(){  
    return {  
        foo:'foo',
        testEvent: this.testEvent
    }  
},
methods: {
	testEvent () {
		console.log("你好")
	}
}
// Child.vue  -------------------->
<Grandson></Grandson>  

// Grandson.vue -------------------------------->
<div @click="$emit('testEvent', 'msg from grandson')">  
{{foo}}  
</div>  
inject:['foo', 'testEvent']
  1. 复杂关系: vuex存放共享的变量
    • state: 用来存放共享变量的地方

    • getter: 可以增加一个getter派生状态,(相当于store中的计算属性),用来获得共享变量的值

    • mutations: 用来存放修改state的方法。

    • actions: 也是用来存放修改state的方法,不过action是在mutations的基础上进行。常用来做一些异步操作

你可能感兴趣的:(每日一题,vue.js,前端,javascript)