Vue单个页面引入CDN链接

在理解了render函数与createElement函数的基础上，想要实现Vue单个页面引入CDN链接就简单很多了。

• 首先采用createElement创立不同资源类型（以js、css为例）的VNode

// js CDNcreateElement('script', {    attrs: {        type: 'text/javascript',        src: this.cdn    }})// css CDNcreateElement('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单页面引入

<template>    <div class="my-page">        <remote-js cdn="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></remote-js>        <remote-css cdn="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"></remote-css>    </div></template>

• 彩蛋（=。=）
  假如你觉得render函数写起来很吃力的话，即可以利用Bable插件，在Vue 中使用 JSX ，让我们可以无限接近于模板语法。上述代码就变成下面这样了，如同是顺眼了一丢丢吧：

components: {    'remote-js': {        render(h) {            return (                <script type= 'text/javascript' src={this.cdn}></script>            )        },        props: {            cdn:  {                type: String,                required: true            }        }    },    'remote-css': {        render(h) {            return (                <link rel='stylesheet' type='text/css' href={this.cdn} />            )        },        props: {            cdn:  {                type: String,                required: true            }        }    }}

PS：将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。