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

Posted 2023-02-23

【中文标题】如何在 Vue.js 中绑定整个组件？

【英文标题】：How to bind whole component in Vue.js?

【发布时间】：2019-10-30 00:25:40

【问题描述】：

我只是想问一下如何在Vue.js中绑定整个组件（例如div）。有没有像innerhtml 这样的东西？这是示例： 父.vue

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

Child.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 中的可见性属性并对其进行了更改，但我认为这不是一个好方法。

【问题讨论】：

Passing html into Vue component的可能重复

您要解决的实际问题是什么？你能给我们举一个更直接的例子吗？在 99% 的情况下，道具是从父级到子级共享数据的方式，以及从子级到父级共享数据的事件。您很少需要传递整个组件。

如果你想拆分 html 检查 [JSX 和 Vue 的 reder][vuejs.org/v2/guide/render-function.html] [Check Slots from Vue here][vuejs.org/v2/guide/components-slots.html]

@Bergur 我有主容器，里面有菜单表和产品表，我想在这个主容器中切换它们。现在我做一些事情，比如改变可见性，当一个可见时另一个不可见。我不知道这是否是一个好方法，所以我想找到一种方法来对这个 mainContainer div 进行 innerHTML。

根据您要解决的问题，slots 可能就是您要查找的内容。但是，正如已经指出的那样，如果没有深入了解实际问题，我们只能猜测。请提供minimal reproducible example 并明确说明您要实现的目标。

【参考方案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>
  `
)

这是一个简单的组件，用于呈现菜单项的无序列表。让我们创建另一个类似的组件来呈现产品的有序列表。请注意，只是为了让它们有点不同，menuList 有ul，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 的新值被设置，组件被渲染。瞧

【讨论】：

哇，很好的答案 :) 非常感谢您和您的时间 是我正在寻找的。干杯和感谢