2.3.3
ููุฏ ุฎููุช ุงูุญุฏ ุงูุฃุฏูู ู ู ุฅุนุงุฏุฉ ุฅูุชุงุฌ ุงูุณููู ุงูุฐู ุฃุญุงูู ุงุฎุชุจุงุฑู ุ ูุงูู ุซุงู ูุญุชุงุฌ ููุท ุฅูู ุนู ู JSX.
ูุฌุจ ุฃู ุชุธูุฑ ุงูุฎุตุงุฆุต ุงูุชู ุชูุชูู ู
ู ุงูุฃุตู ูู ctx.injections
.
Ctx.injections
ู
ูุฌูุฏ ูููู ูุธู ูุงุฑุบูุง. ูุง ูุชู
ุชู
ุฑูุฑ ุงูุฎุตุงุฆุต ุฅูู ุณูุงู ุงูู
ููู ุงููุธููู.
ูุฃูู ุจุฏูุงู ู
ู parent
ุ ููุนุชุจุฑ child
ุฃุทูุงููุง ูู vm
(ุฑุจู
ุง ู
ุดููุฉ). ูุฐูู ูุฏ ุชุญุชุงุฌ ุฅูู ูุชุงุจุฉ provide
ูู vm
.
ุฑุงุฌุน ููุดุบู ุ ูู ุงูุชู ุชุณุชุฎุฏู
ุฎูุงุฑุฒู
ูุฉ ุงูุจุญุซ ุงูุฎุงุตุฉ ุจุงูุญูู ุงูู
ูุฏู
ุฉ ูู ุฃู ุงูุทูู ููุธุฑ ุฅูู ููุณู ุจุญุซูุง ุนู ุงูุณู
ุงุช ุงูู
ุชููุฑุฉ ุซู
ูููู
ุจุญููุงุช ุงูุชุณูุณู ุงููุฑู
ู $parent
ุจุญุซูุง ุนู ุงูุฏุนุงุฆู
ุงูู
ูุฏู
ุฉ ุญุชู ูุตุจุญ ูู ุงูุฌุฐุฑ.
https://github.com/vuejs/vue/blob/b182ac40697edbe8253d4bd68b6ac09e93259e1c/src/core/instance/inject.js#L59 -L59
ุชุนุฐุฑ ุชุดุบูู ูู ุงููู ุ ูููู ุนูุฏู ุง ูู ุช ุจุชุดุบูู https://jsfiddle.net/Austio/vhgztp59/7/ ูุฐุง ุงููู ุงู ูู ูุชู ุชุนุฑูู ุงููุงูุฏ $ ูู ุงูู ููู ุงููุฑุนู ุนูุฏู ุง ูุตูุช ุฅูู ุณูุงู ุงูุจุญุซ. ูุฐู ุนูู ุงูุฃูู ุจุฏุงูุฉ ุฅุฐุง ูู ุชูู ูุฐู ู ุดููุฉ ูู ุงูุชูุฏูู ูู ุงูุฎุงูุงุช ููู ุชูู ููุงู ุนูุงูุฉ ุจูู ุงูู ูููุงุช.
ูุจุฏู ุฃูู ูุชู ุชูุฏูู ุงูู ููู ุงููุธููู ูุจู ุญู ุงููุชุญุงุช
Kingwl ุตุญูุญ ุ ููุฐุง ููุน ู ู ุงูู ุชุทูุจุงุช ุงููููุฉ.
ุฃุชุฐูุฑ ุฃููู ุฃุซุฑุช ูุฐู ุงูููุทุฉ ูุฃููู ููุช ู ุฌููููุง ุจูุง. ูู ุงูููุงูุฉ ุ ุจุฏุง ุงูุฃู ุฑ ุทุจูุนููุง ุจุงููุณุจุฉ ูู ูุฃู ุงูู ูููุงุช ุงููุธูููุฉ ู ุฑุชุจุทุฉ ุจุงูู ููู ุงูุฐู ูุชู ุชูุฏูู ู ููู ุ ูุจุงูุชุงูู ุนูุฏ ุงุณุชุฎุฏุงู ูุง ูู ูุชุญุฉ ุ ูุชู ุชูุตูููุง ุจุงูู ููู ุงูุฎุงุฑุฌู. ูู ุน ุฐูู ุ ููุณ ูุฐุง ูู ุงูุญุงู ู ุน ุงูู ูููุงุช ุบูุฑ ุงููุธูููุฉ:
ุชููู
ุงูุญุงููุฉ ุจุญูู mode: 'foo'
ูุนุฑุถูุง <div><slot/></div>
<!-- rendered in App -->
<container>
<!-- parent is App, mode is undefined -->
<functional></functional>
</container>
<container>
<!-- parent is container, mode is foo -->
<not-functional></not-functional>
</container>
ุชุญุฑูุฑ: alidcastano ููุฏ ูู ุช ุจุชุญุฏูุซ ุงููู ุงู ูู ุชุนูููู ูุฃู ุชุนูููู ูู ููู ูุณุชุฎุฏู Vue 2
ูุงูุง ุขุณู ูุงุณุชุฎุฏุงู ุฅุตุฏุงุฑ Vue ุงูุฎุงุทุฆ ูู ุงููู ุงู ุ ููุฏ ููุช ู ูุฏูุดูุง ุฌุฏูุง ูุนุฏู ุชู ููู ู ู ุชูููู JSX ุงูุฐู ูู ุฃุฏุฑูู. posva ุดูุฑุง
-
ูุฐุง ูุฅู ุงูู ุดููุฉ ููุง ููุณุช ุฃู ุงูู ููู ุงููุธููู ูุง ูู ููู ุชููู ุงูุฎุตุงุฆุต ุงูู ุชููุฑุฉ ุ ูุงูู ุณุฃูุฉ ูู ุฃู ุงูู ููู ุงููุธููู ูุชู ุชูุฏูู ู ูุจู ุงููุชุญุฉุ
LinusBorg ุจูุงุณุทุฉ "ุงูู ุชุทูุจุงุช ุงููููุฉ" ูู ูุฐุง ูุนูู ุฃูู ูุง ููุฌุฏ ุญู ุจุฏูู ุฃู ุฃู ุงูุณููู ู ูุตูุฏุ
ูู ูุฌุจ ุฅูุดุงุก ุญุงููุฉ ูุชููู ุจู
ุซุงุจุฉ vm
ุงูุฐู ูู
ุฑุฑ ุงูุฏุนุงุฆู
ุ ุนูู ุณุจูู ุงูู
ุซุงู ุ ูุฏ ูุชุบูุฑ ุงูุชุตู
ูู
ุฅูู ูุฐุง:
// before
<parent-component>
<child-component />
</parent-component>
// after
<vm-container>
<parent-component>
<child-component />
</parent-component>
<vm-container>
ููู ุงูู ุซุงู ุฃุนูุงู ูุจุฏู ู ูุชูุฎูุง ุจูุง ุฏุงุนู ูุฃู ุฌููุฑ ุงูู ููู ุงูุฑุฆูุณู ูุณุชูุฒู ุจุงููุนู ุฌู ูุน ุงูุจูุงูุงุช ุงูุชู ูุญุชุงุฌูุง ูุชุฒููุฏ ุงูุทูู. ูููู ู ููุชุญ ุนูู ุงูู ูุงูุดุฉ. ูู ูุฐุง ู ุง ุชูุชุฑุญููู ูุง ุฑูุงูุ
ูู ูุบูุฑ vm-container
ุฃู ุดูุก ูุฃู ุงููุชุญุฉ ูุชู
ุนุฑุถูุง ูู ุณูุงู app
ุจูุงุณุทุฉ "ุงูู ุชุทูุจุงุช ุงููููุฉ" ูู ูุฐุง ูุนูู ุฃูู ูุง ููุฌุฏ ุญู ุจุฏูู ุฃู ุฃู ุงูุณููู ู ูุตูุฏุ
ุงูุณููู ูู ูุชูุฌุฉ ุงูุทุฑููุฉ ุงูุชู ุชุนู ู ุจูุง ุงูู ูููุงุช ุงููุธูููุฉ. ุถุน ูู ุงุนุชุจุงุฑู ูุฐู ุงูู ุฌู ูุนุฉ ู ู ุงูู ูููุงุช:
<!-- template of a `parent` component -->
<template>
<Child>
<functional />
</Child>
</template>
ุนูุฏู ุง ุชู ุฑุฑ ู ููููุง ูุธููููุง ุฅูู ูุชุญุฉ ู ููู ุขุฎุฑ ุ ูุฌุจ ุชูุฏูู ู ูุจู ุฃู ูุชู ุชู ุฑูุฑู ุฅูู ุงูุทูู ุ ุจุญูุซ ูู ูู ููุฐุง ุงูู ููู ุงููุฑุนู ุชููู vNodes ุงููุงุชุฌ ูู ุญุชูู ุงููุชุญุฉ. (*)
ูู ุณูุงู ุงูู
ุซุงู ุฃุนูุงู ุ ูุฐุง ูุนูู ุฃูู ูู ุงูููุช ุงูุญุงูู ุงูุฐู ูุชู
ููู ุนุฑุถ ุงูู
ููู <functional>
ุ ูููู ุงูุฃุตู ุงูู
ุชุงุญ ูู ุงูู
ููู ุงูุฎุงุฑุฌู ( <parent>
) ุ ูููุณ <child>
.
ูุจุงูุชุงูู ุ ูุฅู ุงูุญูู ุงููุญูุฏุฉ ุงูู
ุชุงุญุฉ ููู
ููู ุงููุธููู ูู ุชูู ุงูู
ุชููุฑุฉ ูู <parent>
ุฃูุถูุง.
(*): ูุฐู ูู ุงูุทุฑููุฉ ุงูุชู ูุนู ู ุจูุง ุงูุชุทุจูู ุงูุญุงูู ูููุทุงู ุงูุธุงูุฑู ู ุน ุงูู ูููุงุช ุงููุธูููุฉ. ูุชุบููุฑ ุฐูู ูุชุทูุจ ุชุบููุฑ ุงููุซูุฑ ู ู ุงูู ููุงูููุง ุงูุฏุงุฎููุฉ.
posvaLinusBorg ููู ุช ุฐูู ุ ุดูุฑูุง ููุชูุถูุญ .
ูุฐูู ุ ูุธุฑูุง ููุฐู ุงูู
ุชุทูุจุงุช ุ ูุฅู ุงูุทุฑููุฉ ุงููุญูุฏุฉ ูุงุณุชุฎุฏุงู
ุงูุชุฒููุฏ / ุงูุญูู ุจุงูู
ูููุงุช ุงููุธูููุฉ ูู ุชูููุฑ ุงูุฏุนุงุฆู
ูู ุณูุงู app
.
ุฃูุง ู ุชุฃูุฏ ู ู ุฃู ูุฐุง ุงูููุฏ ุณูุชู ุชูุถูุญู ูู ุงููุซุงุฆู. ูุฑุฌู ุงูู ุถู ูุฏู ูุง ูุฅุบูุงู ูุฐู ุงูู ุดููุฉ ุฅุฐุง ูู ููู ููุงู ุฃู ุดูุก ุขุฎุฑ ููุฒู ุงูููุงู ุจู ุฃู ุชูุถูุญู ุ ุดูุฑุง ูู ู ุฑุฉ ุฃุฎุฑู!
ุฑุจู
ุง ูู
ูููุง ุฅูุฌุงุฏ ุทุฑููุฉ ูุชุญุณูู ุงูู
ููู ุงููุธููู ูู ุงููุชุญุฉ
ูููู ูู ุงูููุช ุงูุญุงูู ุ ูุฌุจ ุฃู ูุชู
ุฐูู ู
ุซู posva ู LinusBorg
Kingwl ุดูุฑุง ูุฅุจูุงุก ูุฐุง ู ูุชูุญุง.
ุฃุฎูุฑูุง ูุงู ูุฏู ุจุนุถ ุงูููุช ูู
ุญุงููุฉ ุฏู
ุฌ ูุฐุง ูู ุงูู
ููู ุงูุฅุถุงูู ู
ุญุฑุฑ vue-mobiledoc ุจุงุณุชุฎุฏุงู
ุงููุตุงุฆุญ ุงูู
ุฐููุฑุฉ ุฃุนูุงู. ุฅุญุฏู ุงูู
ุดููุงุช ุงูุชู ุฃุชููุนูุง ุฅุฐุง ูุงู ุงูู
ููู ุจุญุงุฌุฉ ุฅูู ุงุณุชุฎุฏุงู
ู
ู ู
ุซูู app
ูู ุฃูู ู
ู ุงูุตุนุจ ุงูุณู
ุงุญ ุจุงูู
ุฑููุฉ ู
ุน ุงูู
ูููุงุช ุงูู
ุชุฏุงุฎูุฉ ุงูู
ุณุชุฎุฏู
ุฉ.
ุนูู ุณุจูู ุงูู ุซุงู ุ ูุง ุจุฏ ูู ู ู ุชุตุฏูุฑ ุงูู ูููุงุช ุงูู ุณุฌูุฉ ุจุงููุนู ุถู ู ู ุซูู ุงูุชุทุจูู:
...
export default Vue.extend({
render (h) {
return (
<div>
<ParentComp>
<ChildFuncComp/>
</ParentComp>
</div>
)
},
provide () { // data that needs to be injected into functional components
return {
msg: 'hello'
}
},
components: {
ParentComp,
ChildFuncComp
}
})
ุซู ุญุณุจ ููู ู ุ ุนูุฏู ุง ูุณุชุฎุฏู ุงูู ุณุชุฎุฏู ุงูู ููู ุงูุฅุถุงูู ุ ุณูููู ุงูุฃู ุฑ ูู ุง ููู:
// template
<div id="app">
<div id="#someWhereInApp" />
</div>
// script
import SuperCoolComponent from 'SuperCoolComponent'
export default {
mounted () {
this.$once('mounted', () => new SuperCoolComponent().$mount('#someWhereInApp'))
this.$emit('mounted')
}
}
ุฅุฐุง ูุงู ุชุทุจููู ุตุญูุญูุง ุ ููุฐุง ูุญุฏ ุจุดุฏุฉ ู ู ุงุณุชุฎุฏุงู ุงูุชุฒููุฏ / ุงูุญูู ุจุงูู ูููุงุช ุงููุธูููุฉ ุญูุซ ูุง ููุณู ุญ ูู ุจุงุณุชูุฑุงุฏ ุงูู ูููุงุช ุงูุชู ุชุฑุบุจ ูู ุงุณุชุฎุฏุงู ูุง ูุชุณุฌูููุง ุจุดูู ูุฑุฏู.
ุณุฃุณุชุฎุฏู ุงูู ูููุงุช ุงููุงู ูุฉ ุจุฏูุงู ู ู ุฐูู ูุฏุนู ุงูุชูุฏูู / ุงูุญูู
ุฃุญุงูู ุญู ูุฐุง
ุฑุจู
ุง ุชููู ุนู
ููุฉ ุทูููุฉุ
Kingwl ูู ููุช ูุงุฏุฑูุง ุนูู ุญููุงุ
ูู ููุงู ุฎุทุท ูู ุนุงูุฌุฉ ูุฐู ุงูู ุดููุฉ ูู ุงูุฅุตุฏุงุฑ 3ุ
ุนูู ุณุจูู ุงูู ุซุงู ุ ุฃุญุงูู ุชุฌุฑูุฏ v-for away ุฅูู ุฏุงูุฉ ุชุตููุฑ ูููู ูู ูู ุฃู ูููู ุฃุทูุงูู ู ูููุงุช ูุธูููุฉ (ูุฐูู ูุชู ุชูุฏูู ูุง ุจุงููุนู ุนูุฏ ุงูุฏุฎูู ุฅูู ูุธููุฉ ุงูุนุฑุถ ููุง ูู ูููู ุงุณุชูุณุงุฎูุง)
ุฃู ุชุญุฏูุซุ
ุงูุชุนููู ุงูุฃูุซุฑ ูุงุฆุฏุฉ
ูู ููุงู ุฎุทุท ูู ุนุงูุฌุฉ ูุฐู ุงูู ุดููุฉ ูู ุงูุฅุตุฏุงุฑ 3ุ
ุนูู ุณุจูู ุงูู ุซุงู ุ ุฃุญุงูู ุชุฌุฑูุฏ v-for away ุฅูู ุฏุงูุฉ ุชุตููุฑ ูููู ูู ูู ุฃู ูููู ุฃุทูุงูู ู ูููุงุช ูุธูููุฉ (ูุฐูู ูุชู ุชูุฏูู ูุง ุจุงููุนู ุนูุฏ ุงูุฏุฎูู ุฅูู ูุธููุฉ ุงูุนุฑุถ ููุง ูู ูููู ุงุณุชูุณุงุฎูุง)