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。我应该使用裁判还是其他东西？

现在，我使用css中的可见性属性，并且对其进行了更改，但我认为这不是实现此目的的好方法。

Answer 1

如果要在组件之间切换，请查看VueJS动态组件： https://vuejs.org/v2/guide/components.html#Dynamic-Components

您可以使用component元素和：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，根据我按下的按钮呈现这些组件。您可以根据需要更改组件的触发器/动作。

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中绑定整个组件？

1 个答案: