关于ID的疑惑

来源:16-6 Vue.extend进阶用法

慕工程3718384

2019-11-22

 function Loading(msg) {
        const LoadingComponent = Vue.extend({
          template: '<div id="loading-wrapper">{{msg}}</div>',
          props: {
            msg: {
              type: String,
              default: msg
            }
          },
          name: 'LoadingComponent'
        })
        const div = document.createElement('div')
        div.setAttribute('id', 'loading-wrapper')
        document.body.append(div)
        new LoadingComponent().$mount('#loading-wrapper')
        return () => {
          document.body.removeChild(document.getElementById('loading-wrapper'))
        }
      }

这里的

new LoadingComponent().$mount('#loading-wrapper')

意思是不是将 LoadingComponent 这个组件, 挂在到

const div = document.createElement('div')

动态生成的这个div变量上?挂在成功后。 LoadingComponen组件将替换这个动态生成的Div
所以这个 $mount(’#loading-wrapper’)’ 挂在的id 只需要和 动态生成的div的id保持一致就可以挂在成功 , 与 LoadingComponent组件的div没有关系,LoadComponent的id只与显示加载中的div的style有关系!?

写回答

1回答

Sam

2019-11-22

你的理解完全正确,首先:

const div = document.createElement('div')
div.setAttribute('id', 'loading-wrapper')
document.body.append(div)

会生成一个 id 为 loading-wrapper 的 div,然后将该 div 添加到 body 标签的最后一个子元素后,然后:

new LoadingComponent().$mount('#loading-wrapper')

会生成一个 LoadingComponent,并将 LoadingComponent 替换掉已经挂载到 body 下的 loading-wrapper div,Vue 实际实现的时候,会先删除 loading-wrapper div,然后将 LoadingComponent 的 DOM 添加,至于 LoadingComponent 中的 div 是否 id 为 loading-wrapper 则不会影响挂载

2
0

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程,一套中小型企业通用的后台管理系统

2829 学习 · 1714 问题

查看课程