今天我们来学习下vue高阶组件开发用到的provide / inject。

如何理解：就好比你爸给你提供了个箱子，这个箱子放的东西你都可以拿

下来，我们看使用场景

经典场景：自定义radio-group

<radio-group>
<radio>
<radio>
<radio>
<radio-group>
/<radio-group>/<radio-group>

在学习之前，大家思考下。radio-group肯定要用插槽来接受radio组件，那么在radio-group我去检测子组件也能够完成组件封装。

如果我会provide / inject呢？

看看介绍

• radio-group

<template>
	<view>
		<slot>
	/<view>
/<template>

provide就是你爸给你的箱子，group 就是箱子中的一个物品

• radio

<template>
	<view>
		<image>
		<template>
			<text>{{text}}/<text>
		/<template>
		<template>
			<slot>
		/<template>
	/<view>
/<template>

created 中将自己（radio）存放到父组件的childrens中，这样父组件就知道他有那些孩子。

总结

用了provide / inject后，代码就会很优雅，也很好理解。

注：代码示例是我实际用uniapp开发app中的

如果你有更多见解，欢迎评论

閱讀更多 全職碼農 的文章

關鍵字: 箱子 虚拟机 自定义