组件之间传值的几种方法

组件之间传值的8种方法

1.父子之间,使用自定义属性和$emit进行传值

父向子传递
//父组件内
<Son :message=message />
//子组件内
export default {
	props:{
        message:{
            type: String,
            required: true
        }
	}
}
子向父传递
//子组件内
export default {
	methods:{
        say() {
            this.$emit('say', '你好')
        }
	}
}
//父组件内
<Son @say="alert($event)" />

2.作用域插槽

子向父传递
//子组件内
<slot :a="123" :b="321" />
//父组件内
<Son>
    //obj === { a: 123, b: 321 }
	<template #default="obj" />   
</Son>

3.ref.

父向子传递
//父组件内
<Son ref="son" />

methods:{
    this.$refs.son.a()
}
//子组件
methods: {
    a() {
        console.log(1)
    }
}

4.Vuex

Vuex作为共享数据库,可以在全局的任意地方访问其中的公共数据,使用详情可以看我的其他博客

5.事件总线(eventBus)

Vue3中已经被不推荐使用

常用于兄弟组件之间的传值,使用的流程如下:

第一步,创建一个事件总线并导出

import Vue from 'vue'
export const EventBus = new Vue()

第二步,发送事件:

//组件1
mounted(){
	this.bus.$emit('say','你好')
}
//组件2
methods:{
    say(value){
      console.log(value) // '你好'
    }
},
mounted(){
    this.bus.$on('say',this.say)
}  

6.$prent和$children

用法类似ref,但$prent可以获取父组件,而$children则获取的是子组件数组

7.provide/inject

这个方法需要祖先组件向其所有子孙后代注入一个依赖，然后子孙组件就可以调用,不论组件层次有多深，并在子孙关系成立的情况下始终生效。要注意的是,数据只能向下传递

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子、孙组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

8.localStorage

将数据存入本地浏览器缓存中,就可以在全局任意地方调用了

//组件1
localStorage.setItem('a', 123)
//组件2
localStorage.getItem('a')