如何在 Vue.js 中绑定整个组件？

Question

我只想问一下如何在Vue.js中绑定整个组件（例如div）。有没有类似 innerHTML 的东西？这是例子： Parent.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 div。我应该使用 refs 还是什么？

现在我使用 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 的 menuList 和具有 ol

的 productList

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

现在我们可以创建一个主要的 VueJS，它根据我按下的按钮来呈现这些组件。您可以拥有任何 trigger/action 您想要更改的组件。

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 的新值并呈现组件。瞧

如何在 Vue.js 中绑定整个组件？

How to bind whole component in Vue.js?

html

javascript

dom

vue.js