今天我們來學習下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中的

如果你有更多見解，歡迎評論

閱讀更多 全職碼農 的文章

關鍵字: 箱子 虛擬機 自定義