时间戳

首页 > 解决方案 > 我们可以将一个 Vue 组件挂载到多个 div 元素上吗？

javascript - 我们可以将一个 Vue 组件挂载到多个 div 元素上吗？

问题描述

import Selector from '@components/contactSelector'
let vueInstance = new Vue({
  components: { Selector },
  data () {
    return {
      url: url,
      isFilter: false,
      type: 'external',
      selectedList: []
    }
  },
  render (h) {
    return h(Selector, { props: { url, selectedList: this.selectedList, maxHeight: '300px' } })
  }
})

我创建了一个上面的 Vue 实例，我们可以调用它来在多个 div 上渲染它。我已经尝试过，但这似乎不起作用是否有任何方法可以安装在多个 div 上，或者它意味着它只能安装在单个 div 上。如果有人知道，请在这里提供帮助。谢谢。

vueInstance.$mount('#contactSelectorId')
vueInstance.$mount('#contactSelectorId2')

标签： javascriptvue.jsvue-component

解决方案

我相信您可以通过拥有一个根组件来实现您想要做的事情，该组件可以将您的组件作为子组件包含在内。

如果您需要一个组件在同一页面中出现多次，这是方向：

基础组件：

import ChildComponent from './ChildComponent';

export default {
    components: {
        ChildComponent
    },

    :
    :

然后你可以简单地将它 ( <child-component/>) 包含在你需要的任何地方。

请注意，在这种情况下，新的父组件是您需要分配给您的父组件vueInstance才能成为根。

推荐阅读