Как связать весь компонент в Vue.js?

Question

Я просто хочу спросить, как связать весь компонент (например, div) в Vue.js.Есть ли что-то вроде innerHTML?Вот пример: Parent.vue

<template>
  <div id="parent">
   //some elements
  </div>
</template>

Child.vue

<template>
  <div id="child">
   //some different elements
  </div>
</template>

Теперь, как сделать innerHTML дочерним элементом в parent?Я пробовал что-то вроде v-html:component, а затем data(){ return{ component:, и здесь я не знаю, как передать весь компонент vue, например, Child.vue div.Должен ли я использовать ссылки или что-то еще?

Теперь я использую атрибут видимости из css и меняю его, но не думаю, что это хороший способ сделать это.

Answer 1

Если вы хотите переключаться между компонентами, проверьте динамические компоненты VueJS: https://vuejs.org/v2/guide/components.html#Dynamic-Components

Вы можете использовать элемент компонента и пропеллер: is для отправки того, какой компонент визуализировать.

У меня есть рабочая демо здесь: https://codepen.io/bergur/pen/bPEJdB

Представьте себе следующий простой компонент Vue

Vue.component('menuList', {
  data() {
    return {
      list: ['Menu item A', 'Menu item B']
    }
  },
  template: `
   <ul>
    <li v-for="item in list">{{ item}}</li>
   </ul>
  `
})

Это простой компонент, отображающий неупорядоченный список пунктов меню. Давайте создадим еще один похожий компонент, который отображает упорядоченный список продуктов. Обратите внимание, что просто для того, чтобы сделать их немного по-другому, список меню со списком ul и список продуктов со списком ol

Vue.component('productList', {
  data() {
    return {
      list: ['Product item A', 'Product item B']
    }
  },
  template: `
   <ol>
    <li v-for="item in list">{{ item}}</li>
   </ol>
  `
})

Теперь мы можем создать основной VueJS, который визуализирует эти компоненты в зависимости от того, какую кнопку я нажимаю. Вы можете иметь то, что когда-либо триггер / действие вы хотите изменить компонент.

new Vue({
  name: 'main',
  el: '#main',  
  data() {
    return {
      header: 'Component switching',
      selectedComponent: 'menuList'
    }
  },
  methods: {
    setComponent(name) {
      this.selectedComponent = name
    }
  },
  template: `<div>
    <button @click="setComponent('menuList')">Menu List</button>
    <button @click="setComponent('productList')">Products</button>
    <component :is="selectedComponent" />
  </div>`
})

Итак, здесь начинается волшебство.

Мы создаем приложение с некоторыми свойствами данных. Свойство header является просто строковым значением, а selectedComponent сообщает нам, какой компонент визуализируется.

В нашем шаблоне мы используем <component :is="selectedComponent />, поэтому изначально компонент menuList является активным.

Мы создаем метод с именем setComponent, который принимает строковое значение и устанавливает его как новое значение для selectedComponent. При нажатии кнопки устанавливается новое значение для selectedComponent и компонент отображается. Voila