vueにおけるprovideとinjectの使い方を簡単に述べる
1、provideとinjectの機能
Provideとinjectにより、祖先コンポーネントが指定したデータとメソッドをすべての子孫に渡すことができます.
Provideとinjectは主に高次プラグイン/コンポーネントライブラリの開発に使用されます
2、使用例
3つのコンポーネントA(親)、B(子)、C(孫)
親コンポーネントA---provide指定により子孫コンポーネントに渡される値
子/孫コンポーネント----injectで祖先コンポーネントから渡された値を取得
参照リンク:https://cn.vuejs.org/v2/api/#provide-inject
Provideとinjectにより、祖先コンポーネントが指定したデータとメソッドをすべての子孫に渡すことができます.
Provideとinjectは主に高次プラグイン/コンポーネントライブラリの開発に使用されます
2、使用例
3つのコンポーネントA(親)、B(子)、C(孫)
親コンポーネントA---provide指定により子孫コンポーネントに渡される値
export default {
provide() {
// provide ,
return {
reload: this.reload,
msg:this.msg
};
},
data(){
return {
msg:'hello world!'
}
},
methods: {
reload() {
console.log("C A !");
},
},
},
子/孫コンポーネント----injectで祖先コンポーネントから渡された値を取得
export default {
//inject: ["reload","msg"],
inject:{
//
msg:{
from:'A', // A
default:'a default msg'
},
reload:{
from:'A'
}
},
mounted() {
this.reload();
},
},
参照リンク:https://cn.vuejs.org/v2/api/#provide-inject