Vue的组件化开发-1

1.概念

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。 在自定义组件时，会用到Vue的全局APIVue.extend()和Vue.component()。 (1) Vue.extend() 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

(2) Vue.componment() 注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称。

创建并使用一个组件可以分为3步：

创建组件构造器 Vue.extend()注册组件 Vue.componment()在html中使用该组件

(实例代码可参考下文任意一段代码)

2.全局组件与局部组件

（1） 全局组件 全局组件，意味着可以在多个Vue的实例下使用。如下所示，既可以在id为app的<div>下使用，也可以在id为app2的<div>下使用。

<div id="app"> <my-cpn></my-cpn> </div> <div id="app2"> <my-cpn></my-cpn> </div> <script> //``ES6 字符串语法，可以换行 //1.创建组件构造器对象 const cpnc = Vue.extend({ template:`<div> <h2>i love u.</h2> <p>okok,just so so.</p> </div>` }) //2.注册组件 Vue.component('my-cpn',cpnc)//全局组件，意味着可以在多个Vue的实例下使用 //Vue实例化对象--app和app2 const app = new Vue({ el:'#app', //用于管理要挂载的数据 data:{ //定义数据 } }); const app2 = new Vue({ el:'#app2' }); </script>

结果如下：

（2）局部组件 局部，就意味着，只能在某个Vue实例下使用。 如下所示。

<div id="app"> <cpn2></cpn2> </div> <div id="app2"> <cpn2><cpn2> </div> <script> //``ES6 字符串语法，可以换行 //1.创建组件构造器对象 const cpnc = Vue.extend({ template:`<div> <h2>i love u.</h2> <p>okok,just so so.</p> </div>` }) //2.注册组件(局部) const app = new Vue({ el:'#app', //用于管理要挂载的数据 data:{ //定义数据 }, components:{ //cpn使用组件时的标签名 cpn2:cpnc } }); const app2 = new Vue({ el:'#app2' }); </script>

3.父组件与子组件

我们一般注册构造器是在Vue实例中，而父组件与子组件的关系则不一样。 子组件的注册是在父组件中。 父组件的注册在Vue实例中。

达到效果：可以在父组件中使用子组件。 <div id="app"> <cpn></cpn> </div> <script> //``ES6 字符串语法，可以换行 //1.创建组件构造器对象 //子组件 const cpnc2 = Vue.extend({ template:`<div> <h2>i love u,and i am son.</h2> <p>这是第二个组件.</p> </div>` }); //父组件 const cpnc = Vue.extend({ template:`<div> <h2>i love u.</h2> <cpn2></cpn2> //使用子组件 <p>我是第一个组件.</p> </div>`, components:{ cpn2:cpnc2 //注册子组件 } }); const app = new Vue({ el:'#app', //用于管理要挂载的数据 components:{ cpn:cpnc //注册父组件 } }); </script>

结果如下： （子组件要写在父组件前。） （一般也可以认为Vue实例是最顶层的组件–root）

另外，子组件不能在html中直接使用（超出了子组件的作用域）。

4.语法糖写法

(1) 全局组件

原来的写法：

const cpnc2 = Vue.extend({ template:`<div> <h2>人生啊。。。</h2> </div>` }); Vue.component('cpn2',cpnc2)

语法糖：

Vue.component('cpn23',{ template:`<div> <h2>人生啊。。。</h2> </div>` });

(2) 局部组件

原来的写法：

const cpnc = Vue.extend({ template:`<div> <h2>人生啊。。。</h2> </div>` }); const app = new Vue({ el:'#app', //用于管理要挂载的数据 components:{ //cpn使用组件时的标签名 cpn:cpnc } });

语法糖：

const app = new Vue({ el:'#app', //用于管理要挂载的数据 components:{ //cpn使用组件时的标签名 cpn:{ template: `<div> <h2>人生啊。。。</h2> </div>` } } });

5.组件模板抽离写法

开发中不常使用，暂时略过。

6.组件的data数据存放

前面的组件内容都是写死的，而在开发中我们会使用传来的数据。 这里需要提出的一点是，由于组件属于一个单独封装的部分，因此组件的data不能放在Vue实例的data模块中，在组件内部应该有一个地方用于存放组件内的data。

与Vue实例里面的data不同的时，组件的data不能是object，而必须是一个function，这个function返回一个object，object内部保存着数据。

<div id="app"> <cpn23></cpn23> </div> <script> Vue.component('cpn23',{ template:`<div> <h2>人生啊。。。</h2> <p>{{title}}</p> </div>`, data(){ return { title:'这是data里面的title' } } }); </script>

结果：

关于为什么Vue组件data只能是function，指路博客链接

(鉴于篇幅过长， 进一步的组件问题会在下一篇文章《Vue的组件化开发-2》中讲)