Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.1 创建全局组件

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第5章 Vue.js组件

Vue的核心思想是数据驱动视图和组件化，组件是Vue很重要的功能模块，作用是拆分代码，代码复用等。

5.1 创建全局组件

5.1.1 组件创建方式一

• Vue.extend方法配置要渲染到页面中的HTML代码
• 使用Vue.component方法注册组件，第一个参数为组件名称，第二个参数是要渲染的HTML代码
• 组件以标签形式调用

当前组件的名称为mycom1，如果组件的名字用驼峰式命名法，如myCom1，在视图层调用时可以使用横线拼接。

template属性只能有一个根节点

5.1.2 组件创建方式二

直接使用Vue.component注册组件，第一个参数是组件名字，第二个参数是要渲染的HTML代码。

5.1.3 组件创建方式三

前两种方式的template属性值都是字符串，这样没有代码提示

将配置对象中的template属性值抽离成template模板，将template模板放到视图层，就可以正常写HTML代码了。