如何在 Vue.js 中綁定整個組件？

Question

我只是想問一下如何在Vue.js中綁定整個組件（例如div）。 有沒有像innerHTML 這樣的東西？ 這是示例：Parent.vue

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

孩子.vue

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

現在如何innerHTML child in parent？ 我嘗試過類似v-html:component然后data(){ return{ component:在這里我不知道如何傳遞像 Child.vue div 這樣的整個 vue 組件。 我應該使用 refs 還是什么？

現在我使用css中的可見性屬性並對其進行了更改，但我認為這不是做到這一點的好方法。

Answer 1

如果要在組件之間切換，請查看 VueJS 動態組件： https ://v2.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的 menuList 和 productList 具有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設置一個新值並呈現該組件。 瞧