本文我们来介绍下Vue中的组件,组件是可复用的 Vue 实例,且带有一个名字。
组件的创建
extend方式
首先通过Vue.extend
方法来定义一个全局组件。template
就是组件将来要展示的HTML内容。然后通过ponent
来添加我们的组件。(注意:组件的名称如果采用的是驼峰命名法,那么在使用组件的时候,大写必须改为小写,而且要用 “-”连接。)
<div id="app"><my-com></my-com></div><script>// 使用 Vue.extend 创建全局的Vue组件var com1 = Vue.extend({template: "<h3>这是个Vue组件</h3>"})// 使用 ponent('组件名称', 创建出来的组件对象) 添加组件ponent("myCom",com1);var vm = new Vue({el: "#app",data: {},})</script>
简写方式
在前面的基础上,我们可以简写 Vue.extend() 创建全局Vue组件的操作。
<div id="app"><my-com></my-com></div><script>ponent("myCom",{template: "<div><h3>这是个Vue组件</h3><p>Vue组件</p></div>"})var vm = new Vue({el: "#app",data: {},})</script>
注意:创建的组件中HTML元素只能有一个root标签,如果有多个时会报错,建议在所有元素最外层用< div>标签包起来。
template标签
在上面的例子中我们的组件元素都是直接在template中直接通过字符串来声明的,这种方式书写时没有智能提示,容易出现错误,这时我们可以通过<template>
标签来定义组件HTML元素,然后通过id来使用。
<div id="app"><my-com></my-com></div><template id='com'><h3>这是个Vue组件</h3></template><script>ponent("myCom",{template: "#com"})var vm = new Vue({el: "#app",data: {},})</script>
私有组件
上面定义的都是全局的组件,接下来我们看看如何在单个Vue实例中定义私有的组件。
<div id="app"><my-com></my-com></div><div id="app1"><my-com></my-com></div><script>var vm = new Vue({el: "#app",data: {},//定义私有组件components:{'myCom':{template: "<h3>这是一个私有组件</h3>"}}})</script>
组件中的data和methods属性
组件中的这两个属性和Vue实例中的 data 和 methods 属性很类似,使用方式也是一样的。需要注意的是,组件中定义的 data 必须是一个函数,并且返回一个对象。
<div id="app"><my-com></my-com></div><script>ponent("myCom",{template:`<div><button @click='show'>调用方法</button><h3>这是个Vue组件,{{id}}:{{name}}</h3></div>`,data:function(){return {id:1,name:'my-com'}},methods:{show(){console.log('组件中的show方法被调用')}}})var vm = new Vue({el: "#app",data: {},})</script>
以上就是 data 和 methods 属性的使用,接下来我们讨论一下 data 属性为什么必须要返回一个对象呢?
我们要清楚组件和Vue实例的区别:Vue实例是在页面加载的时候被实例化的,一个页面就一个;而组件是可以复用的,也就是在一个页面中同一个组件可以有多个实例。如下案例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="/ajax/libs/vue/2.6.12/vue.min.js"></script></head><body><div id="app"><!--复用3个Vue组件--><counter></counter><counter></counter><counter></counter></div><template id="tmpl"><div><button @click="increment">加1</button><h3>{{count}}</h3></div></template><script>// 声明的全局对象var dataObj = {count: 0 }// 这是一个计数器的组件, 点击按钮,count值+ponent('counter', {template: '#tmpl',data: function () {return dataObj},methods: {increment() {this.count++}}})var vm = new Vue({el: '#app',data: {},methods: {}});</script></body></body></html>
通过演示我们可以看到,三个组件同时进行了累加,而我们需要的是分别累加互不干扰。
在data属性中返回一个对象,组件每次复用的时候都给返回一个新的实例对象,让组件实例之间数据独立。