Vue单个页面引入CDN链接
在了解了render函数与createElement函数的基础上，想要实现Vue单个页面引入CDN链接就简单很多了。
首先采用createElement创建不同资源类型（以js、css为例）的VNode
// js CDN
createElement('script', {
attrs: {
type: 'text/javascript',
src: this.cdn
}
})
// css CDN
createElement('link', {
attrs: {
rel: 'stylesheet',
type: 'text/css',
href: this.cdn
}
})
然后基于上述VNode，采用render创建函数式组件remote-js及remote-css
components: {
'remote-js': {
render(createElement) {
return createElement('script', {
attrs: {
type: 'text/javascript',
src: this.cdn
}
})
},
props: {
cdn: {
type: String,
required: true
}
}
},
'remote-css': {
render(createElement) {
return createElement('link', {
attrs: {
rel: 'stylesheet',
type: 'text/css',
href: this.cdn
}
})
},
props: {
cdn: {
type: String,
required: true
}
}
}
}
Vue单页面引入
彩蛋（=。=）
如果你觉得render函数写起来很费劲的话，就可以利用Bable插件，在Vue 中使用 JSX ，让我们可以无限接近于模板语法。上述代码就变成下面这样了，好像是顺眼了一丢丢吧：
components: {
'remote-js': {
render(h) {
return (
)
},
props: {
cdn: {
type: String,
required: true
}
}
},
'remote-css': {
render(h) {
return (
)
},
props: {
cdn: {
type: String,
required: true
}
}
}
}
PS：将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。
发表评论 (审核通过后显示评论)：