33-Vue组件-自定义全局

这里主要阐述自定义全局组件的多种方法

image.png

https://cn.vuejs.org/v2/api/#Vue-extend
https://cn.vuejs.org/v2/api/#Vue-component

0.助记

知道模板的三种写法(模板字符串,script,template)
知道组件构造器会自动调用,可以直接传递对象

一.组件构造器

image.png

二.对象

image.png

image.png

解释:第二个参数如果传递的不是一个组件构造器,而是一个对象,那么系统会自动将该对象传递给组件构造器

三.script标签

image.png

模板下载JS中的弊端:
1.没有语法提示
2.不适用复杂网页结构
像使用腾讯的模板一样,将模板写在script标签中,再赋值给template属性
过去是直接在ES6的模板字符串``中编写模板,现在是直接通过script标签创建模板

四.template标签(官方推荐)

image.png

五.注意

1.组件模板只能有一个根元素;一般情况下,企业开发中,我们会将所有的模板都放到一个div中
2.要使用Vue,至少有一个Vue实例

image.png