Mam dynamiczny widok:
<div id="myview">
<div :is="currentComponent"></div>
</div>
z powiązaną instancją Vue:
new Vue ({
data: function () {
return {
currentComponent: 'myComponent',
}
},
}).$mount('#myview');
To pozwala mi dynamicznie zmieniać mój komponent.
W moim przypadku, mam trzy różne składniki: myComponent
, myComponent1
, i myComponent2
. I przełączam się między nimi w ten sposób:
Vue.component('myComponent', {
template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}
Teraz chciałbym przekazać rekwizyty myComponent1
.
Jak mogę przekazać te właściwości, gdy zmieniam typ komponentu na myComponent1
?
javascript
vue.js
vuejs2
vue-component
Epitouille
źródło
źródło
propName="propValue"
. Czy to twoje pytanie?<myComponent1 propName="propValue">
, zmieniam komponent programowo z$parent.currentComponent = componentName
<div :is="currentComponent"></div>
. Tam właśnie dodasz atrybut.myComponent1
weź rekwizyty imyComponent2
nie weź rekwizytówOdpowiedzi:
Aby dynamicznie przekazywać właściwości, możesz dodać
v-bind
dyrektywę do swojego komponentu dynamicznego i przekazać obiekt zawierający nazwy i wartości twoich właściwości :Twój komponent dynamiczny wyglądałby więc tak:
A w Twojej instancji Vue
currentProperties
możesz zmienić na podstawie bieżącego komponentu:Więc teraz, gdy
currentComponent
jestmyComponent
, będzie miałfoo
właściwość równą'bar'
. A jeśli tak nie jest, żadne właściwości nie zostaną przekazane.źródło
<component>(here)</component>
. Czy to możliwe?<slot>
dla każdego dynamicznie renderowanego komponentu. vuejs.org/v2/guide/components-slots.htmlMożesz także obejść się bez obliczonej właściwości i wstawić obiekt.
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
Pokazane w dokumentach na V-Bind - https://vuejs.org/v2/api/#v-bind
źródło
Możesz to zbudować jak ...
źródło
Jeśli zaimportowałeś kod za pomocą require
możesz również odwoływać się do komponentu poprzez właściwość name, jeśli masz przypisany komponent
źródło