Динамический компонент Vue.js с динамическими данными

1

Я пытаюсь использовать элемент <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 (новичок в нокауте), поэтому, возможно, я просто не понимаю намерения тега компонента.

Теги:
vue.js

2 ответа

1

Этот пример может помочь вам понять это. 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>
1

вы можете просто использовать v-bind

HTML

<component v-bind:is="currentView" v-bind="data"></component>

скрипт

data()
{
    return {
        data: {
            currentData: "example"
        } 
    }
}

и он будет передавать currentData до ребенка. Вы можете также добавить другие свойства вместе с ним, в том числе и is.

Если вам нужно изменить компонент вместе с реквизитами, вы просто измените свойство data или все, что вы хотите назвать.

https://codesandbox.io/s/7w81o10mlx

Ещё вопросы

Сообщество Overcoder
Наверх
Меню