前言
父子组件传参可以通过props
和emit
来实现,但是当组件的层次结构比较深时,props
和emit
就没什么作用了。vue为了解决这个提出了Provide / Inject
,知道这个东西,但是一直没用过,最近碰到了一个问题,踩了一些坑,在这里记录一下
备注:
我安装的是vue3.x,v-model用的是3.x的语法。
2.x和3.x用法一致,我这里是用2.x写的
通用知识
基本用法
provide 选项应该是:一个对象或返回一个对象的函数
inject 选项应该是:一个字符串数组,或 一个对象,对象的 [key] 是本地的绑定名
provide 和 inject 绑定并不是可响应的。这是刻意为之的。
代码执行顺序
data->provide->created->mounted
基本代码
主要使用grandpa
和grandson
这两个组件,son
在这里充当一个层级
//grandpa.vue
<template>
<div>
<h3 style="margin-bottom: 20px">爷爷组件</h3>
<el-button type="primary&#