Vue组件化，你学废了吗

什么叫Vue组件化

组件化，是Vue的一种重要思想。即把一个应用拆分成一个个独立可复用的小组件，最终可组成一个组件树。
就像你搭积木一样，假如你这次想搭一个小屋，你就可以把它们拆成小块，一块一块的搭建。那下次你不想要小屋了，想搭一座城堡送给你女朋友（or 男朋友），那上次小屋的一些积木块也是可以再次使用的。呐，这差不多就是组件化的逻辑了。

组件化的优点

代码可以更加方便的组织管理，并且扩张性更强（因为可以重复使用），可以减少不必要的代码冗余。

注册全局组件的基本步骤

1，创建组件构造器，
调用Vue.extend()方法

//1,创建组件构造器对象const cpn = Vue.extend({// template，模板的意思 后面是想要实现组件的内容template:` <p>第一用笔，第二识势，第三裹束，三者兼备，然后为书</p>`});

也可以省略Vue.extend()方法，直接声明赋值

let cpn = {template:`<h3>篆法圆奋，章草飘落，八分凶险，飞白窈窕</h3>`}

2，注册组件：调用Vue.component()方法

 //2,注册组件Vue.component('my-cpn',cpn);

有两个参数，第一个参数是定义一个使用组件时的标签名，比如我这里用的是my-cpn，那我使用时就用这个标签，详见第三点
第二个参数是你在创建组件构造器的时候定义的名
3，使用组件：

<div id="app"><!-- 3，使用组件 --><my-cpn></my-cpn></div>

注意：正常的引用Vue文件和创建实例是必不可少的哦
局部组件必须在Vue实例作用范围内使用，全局可以在别的vue实例中使用

<div id="app2"><my-cpn></my-cpn></div>

完整代码如下

<body><div id="app"><!-- 3，使用组件 --><my-cpn></my-cpn></div><script src="./js/vue.min.js"></script><script>//1,创建组件构造器对象const cpn = Vue.extend({// template，模板的意思 后面是想要实现组件的内容template:` <p>第一用笔，第二识势，第三裹束，三者兼备，然后为书</p>`});//2,注册组件Vue.component('my-cpn',cpn);let app = new Vue({el:"#app",})</script>
</body>

效果图：

注册局部组件

局部组件是写在Vue实例中的，作用范围也只能在vue实例的作用范围
注册：

let app = new Vue({el:"#app",components:{//cnp3是标签名"cpn3":{template:`<h3>上通自然之性，下取万类之象</h3>`}}})

使用：

<div id="app"><cpn3></cpn3></div>

template标签

在前面我们是直接在模板后面书写html代码，那么html代码跟js代码就混在了一起，这显得不大优雅，所以我们可以使用template标签。把html放到template标签里，再给template标签定义一个id名进行绑定
全局组件

<div id="app"><mycpn1></mycpn1></div>
<template id="vtem"><h3>第一用笔，第二识势，第三裹束，三者兼备，然后为书</h3></template>

let cpn1 = {template:"#vtem"}
Vue.component("mycpn1",cpn1)

局部组件

<div id="app">
<cpn3></cpn3>
</div>
<template id="tem"><h3>上通自然之性，下取万类之象</h3></template>

let app = new Vue({el:"#app",components:{"cpn3":{template:"#tem"}}})

那一个简单的组件就写完了，你学废了吗？