5引入vue组件_Vue使用日记（5）：Vue组件化理解（一）

Vue组件化开发

组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。

注册组件的基本步骤：

1)创建组件构造器：调用Vue.extends()创建组件构造器；

2)注册组件：调用Vue.component()注册组件；

3)使用组件：在Vue实例作用范围内使用组件。

这里以下载引入vue.js的方式使用Vue，后续会继续说明使用Vue脚手架cli创建项目的方式。

div id=\"app\"!-- 3、使用组件 --component-name<>/component-name/div!-- 4、在new Vue挂载的app实例之外使用组件，不生效 --component-name<>/component-name!-- 这里我们以引入vue.js的方式进行Vue的使用，然后来创建组件 --script src=\"../js/vue.js\"<>/scriptscript

<div id="app">        <component-name>component-name>div><component-name>component-name><script src="../js/vue.js">script><script>    // 1、创建组件构造器    const myComponent = Vue.extends({        template:`            

组件标题

组件内容

` }); // 2、注册组件，并且给定组件的名字 Vue.component("component-name",myComponent); let app = new Vue({ el:"#app" });script>

div id=\"app\"!-- 3、使用组件 --component-name<>/component-name/div!-- 4、在new Vue挂载的app实例之外使用组件，不生效 --component-name<>/component-name!-- 这里我们以引入vue.js的方式进行Vue的使用，然后来创建组件 --script src=\"../js/vue.js\"<>/scriptscript

这里对每一个步骤所代表什么含义做一个说明

1)Vue.extend()：

调用Vue.extend()创建一个组件构造器。在创建组件构造器时传入的template模板，就是在使用到组件的地方(component-name)，要显示的HTML代码。

这种创建的写法在Vue2.x的文档中已经很少见到，但是在很多资料还是会提到这种方式，而且这种方式是学习后面内容的基础。后续会说到创建组件的语法糖。

2)Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的名称，使其像使用div、p、span这些标签一样。所以需要传递两个参数：注册组件的标签名、组件构造器；

3)组件必须挂载在某个Vue实例下，否则它不会生效：

第二个地方使用组件不会生效，因为它在new Vue实例挂载的app之外使用。

---

OK，这就是本次的文章的全部内容了，如有谬误，欢迎指正。 如果觉得本篇文章对你有帮助，欢迎点赞、打赏和收藏，您的支持和持续关注是“飞策科技”不断更新的动力！ 也欢迎您把订阅号分享给身边的朋友。