Я пытаюсь использовать элемент <component>
для динамического отображения выбранного компонента. Каждый из этих отображаемых компонентов может принимать любое количество объектов данных. Что-то вроде:
<div id="containers">
<component v-bind:is="currentView"></component>
</div>
var myVue = new Vue({
el:"#containers",
data:{
currentView: "my-component-one",
currentData: {...}
},
method: {
changeView: function(){
//change this.currentView
//change this.currentData
}
}
});
Однако в документации Vue указано, что атрибут v-bind:is
может использоваться для передачи имени компонента или объекта options.
Неясно, как я условно получаю объект значений для использования этого компонента, а также условно изменяю, какой компонент отображается.
Я очень зелёный, используя Vue (новичок в нокауте), поэтому, возможно, я просто не понимаю намерения тега компонента.
Этот пример может помочь вам понять это. https://jsfiddle.net/jacobgoh101/mLbrj5gd/
Для передачи имени компонента
Если компонент является глобальным, вы можете передать имя компонента в v-bind:is
Например, Fo
Vue.component('test1', {
template: '<div>test1</div>'
})
HTML
<component is="test1"></component>
Для прохождения опции
Компонент Vue - это просто объект Javascript со специфическими свойствами
например,
<component v-bind:is="{
template: '<div>test2</div>'
}"></component>
вы можете просто использовать v-bind
HTML
<component v-bind:is="currentView" v-bind="data"></component>
скрипт
data()
{
return {
data: {
currentData: "example"
}
}
}
и он будет передавать currentData
до ребенка. Вы можете также добавить другие свойства вместе с ним, в том числе и is
.
Если вам нужно изменить компонент вместе с реквизитами, вы просто измените свойство data
или все, что вы хотите назвать.