provide inject

一般我们在vue中用的比较多的，都是子组件和父组件相互传值，或者是跨组件的vuex

• 父子组件通信

// 父组件
<template><div><Confirm :data="btnList"></Confirm></div>
</template>
<script>
import Confirm from "@/components/confirm"
export default {
    components: {
    Confirm }data () {
    return {
    btnList: ['确认', '取消']}}
}
</script>// 子组件
<template><div><div v-for="item in data">{
    {
    item}}</div></div>
</template>
<script>
export default {
    props: {
    data: {
    type: Array}},data () {
    return {
    }}
}
</script>

• vuex

// vuexstate: {
    village: {
    name: "张三",id: 1,},},// 页面A
console.log(this.$store.state.village.name) // 张三// 页面B
console.log(this.$store.state.village.id) // 1

简介

• provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
• provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
• inject 选项应该是： 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value
• 但是数据并不是响应式，所以适合用于不会进行改变的数据

使用场景

• 让子孙组件甚至更深层次的组件依然能访问父组件中的数据

// 顶级组件/父组件引用处
var app = new Vue({
    el: '#app',data () {
    return {
    address: '南山区',id: 1}},provide () {
    return {
    _this: this // 把整个this传下去，这样所有的组件都能访问当前的父组件的任何属性和方法了}},
})// 子组件/子孙组件
var app = new Vue({
    el: '#app',inject:['_this'] // 引入父组件provide中抛出的 _thisdata () {
    return {
    }},mouthed () {
    console.log(this._this.address) // 南山区},
})