Vue组件指定挂载节点

638 阅读1分钟

使用场景

偶尔会出现特殊ui布局,把已经封装好的一个组件内部的元素定位到页面底部或者顶部之类的需求。

想保留业务组件的整体性,又想脱离组件的布局。

原理

创建对应的容器元素(div),把容器元素(div)插入到你想要组件放入的位置,通过 extend 把组件实例渲染出来,再把整个实例通过 $mount 插入到容器元素(div)。

<!-- dom效果 -->
<body>
  <div id="app">
    ....
    <div class="marqueeList">
      走马灯组件
    </div>
  </div>
</body>
<!-- 走马灯 -->
import marqueeRank from '../components/marqueeRank/index.vue'

export default {
  ....
  methods: {
    setDemo() {
      <!-- 把组件注入Vue,并创建对应实例 -->
      const mk = Vue.extend(marqueeRank)

      <!-- 创建容器元素 -->
      const div = document.createElement('div')
      div.id = 'mk'

      <!-- 把容器元素注入到对应的dom中 -->
      document.getElementById('app')?.appendChild(div)

      <!-- 将应用实例挂载在一个容器元素中 -->
      new mk().$mount('#mk')
    }
  }
}