Vue.js组件的使用
Vue.js组件化的基本使用
Vue.js组件化基本使用分为两步:
第一步是创建组件构造器对象:const cpnC = Vue.extend({ template:`` })
其中template标签中放置的是组建的内容。
第二步是注册组件:Vue.component(‘cpn’,cpnC)
其中component绑定的两个参数分别是组件标签名和组件构造器对象。完整的组件化基本使用代码如下:
`<body>
<div id="app">
<cpn> </cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//es6 `` 定义字符串可以换行定义
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template:`<div>
<h2>我是标题</h2>
<p>红红火火恍恍惚惚</p>
<p>水水水水水水水</p>
</div>`
})
//2.注册组件(组件标签名,组件构造器)
Vue.component(`cpn`,cpnC)
const app = new Vue({
el: '#app',
data: {
message:'你好啊',
}
})
</script>
</body>
全局组件和局部组件
在注册组件时,没有在Vue实例对象中注册的组件均为全局组件,而在Vue实例对象里面注册的组件为局部组件,全局组件可在多个Vue实例当中使用。全局组件与局部组件注册方式不同:
全局组件在Vue实例外部注册:Vue.component(’cpn‘,cpnC)
而局部组件在Vue实力内部注册:
const app = new Vue({
el: '#app',
data: {
message:'你好啊',
},
//注册局部组件
components:{
//cpn使用组件时的标签名
cpn:cpnC
}
})
组件注册的语法糖形式
注册全局组件的语法糖:
Vue.component(`cpn2`,{
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容,呵呵呵呵</p>
</div>
`
})
注册局部组件的语法糖:
const app = new Vue({
el: '#app',
data: {
message:'你好啊',
},
//注册局部组件的语法糖
components:{
cpn1: {
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容,呵呵呵呵</p>
</div>`
}
}
})
组件模板的分离写法
如果组件模板写在template标签里面,当模板过多时会显得程序臃肿,这时可以采用组件的分离写法,具体方式是将组件模板从template中分离出来。有两种方式分离模板,一种是js方式,另一种是采用template标签。
js方式分离模板:
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容,呵呵呵呵</p>
</div>
</script>
template标签形式分离模板:
<template id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容,呵呵呵呵</p>
</div>
</template>
注意:两种写法均需用id将模板与组件绑定,其中绑定方式为:Vue.component('cpn',{ template:'#cpn' })
另外:js写法,类型必须是text/x-template
父组件与子组件
下面先创建两个组件:第一个组件:
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容,哈哈哈哈哈</p>
</div>`
})
第二个组件组件:
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容,呵呵呵呵</p>
<cpn1></cpn1>
</div>`,
components:{
cpn1:cpnC1
}
})
注意第一个组件里面注册了第二个组件
当两个组件存在一个组件在另一个组件中被注册的情况时,被注册的组件称为子组件,另一个则称为父组件。
组件中数据的存放问题
在Vue实例当中,我们的数据可以存在data:{}
当中,但是在组件中数据却是存在下面的函数当中的。
data(){
return{ ... }
}
下面解释为什么在函数data中存数据,而不是在标签data中存数据。我们知道,在Vue实例当中的数据,是可以被多个组件公用的数据,但是在组件当中,我们的组件可能被多次在多个不同的地方使用,假如组件数据可以存在标签data当中,那么会出现这种情况:如果我们定义两个计数器,分别实现加减操作,我们在当前页面使用该组件进行了加操作,而下一个页面内使用该组件返回的时之前页面产生的结果,但是我们并不希望两者相互干扰,所以Vue组件数据是存在data函数当中,因为组件的实例对象并不公用一个data函数。具体代码如下:
<body>
<!--组件实例对象,不共用一个data-->
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>当前计数:{{count}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
<!-- 1.注册组件-->
Vue.component(`cpn`,{
template:`#cpn`,
data(){
return{
count:0
}
},
methods:{
increment(){
this.count++
},
decrement(){
this.count--
}
}
})
const app = new Vue({
el: '#app',
data: {
message:'你好啊',
}
})
</script>
</body>
下篇介绍组件间的通信。