Vue2中如何详细解析provideinject实现响应式跨组件传值？

本文共计792个文字，预计阅读时间需要4分钟。

目录前言

一、基本用法

二、响应式设计

1.方法一：递归的参数用一个方法返回

2.方法二：将需要递归的参数定义成一个对象

总结前言官网概念：这对选项需要一起使用，以允许一个祖先元素控制后代的样式，同时还可以保持后代元素的独立性。

目录

• 前言
• 一、基本用法
• 二、响应式
• 1.方法一：传递的参数用一个方法返回
• 2.方法二：把需要传递的参数定义成一个对象
• 总结

前言

官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

一、基本用法

在父组件中使用provide传值，在子组件中用inject接收。

// 父组件 data() { return { name: "卷儿" } }, provide: function() { return { name: this.name } },

// 子组件 inject: ['name'],

这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。