javascript - 如何在 Vue.js 中绑定(bind)整个组件？

Question

我只是想问如何在Vue.js中绑定(bind)整个组件(例如div)。有没有类似innerHTML的东西？这是示例:父.vue

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

Child.vue

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

现在如何在父级中innerHTML子级？我尝试过类似 v-html:component 的东西，然后 data(){ return{ component: ，在这里我不知道如何传递整个 vue 组件，比如 Child.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产品列表有 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 property 只是一个字符串值，并且 selectedComponent告诉我们正在渲染哪个组件。

在我们的模板中，我们使用 <component :is="selectedComponent />所以一开始 menuList 组件是事件的。

我们创建一个名为 setComponent 的方法它接受一个字符串值并将其设置为 selectedComponent 的新值。通过按下按钮，新值 selectedComponent设置并渲染组件。瞧