在平常,我们使用vue组件的时候,都要先在.vue
文件中引入我们要使用的组件。虽然这样能满足大部分日常开发的需求,但这种方法在某些场景下,就有些难以应对。
- 组件的模板是通过调用接口从服务端获取的,需要动态渲染组件;
- 实现类似原生 window.alert() 的提示框组件,它的位置是在 下,而非 ,并且不会通过常规的组件自定义标签的形式使用,而是像 JS 调用函数一样使用。
extend
Vue.extend 的作用,就是基于 Vue 构造器,创建一个“子类”,它的参数跟 new Vue 的基本一样,但 data 要跟组件一样,是个函数,再配合 $mount ,就可以让组件渲染,并且挂载到任意指定的节点上,比如 body。
1 | import Vue from 'vue'; |
这样就可以满足我们用js方法调用的方式来控制组件,但是在平常的开发中,我们用的vue的runtime编译环境,不支持template
模板,而且用字符串来描述组件的模板,也有些不太友好。那么,我们可以试试用new Vue()
的方式。
new Vue
new Vue()
也可以直接创建 Vue 实例,并且用一个 Render 函数来渲染一个 .vue 文件。
1 | import Vue from 'vue'; |
这样既可以使用 .vue 来写复杂的组件,还可以根据需要传入适当的 props。渲染后,如果想操作 Render 的 Notification 实例,也是很简单的:
1 | const notification = Instance.$children[0]; |