关于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 则不会影响挂载
20
相似问题