- 组件开发的基本流程
- 创建组件构造器;
- 注册组件
- 使用组件
-
组件基本使用示例
创建组件构造器使用:Vue.extend({template:`<h1>www</h1>`}),Vue.extend()创建的是一个组件构造器,它传入对象。通常在创建组件构造器时,传入template代表我们自定义组件的模板。
注册组件使用Vue.component('组件标签名',对应的extend对象名称|extend对象)
<div id="app">
<!-- 3.使用组件 -->
<cpn1></cpn1>
</div>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.创建组件构造器
const welcome=Vue.extend({
template:`
<div>
<h1>我是组件</h1>
</div>
`
})
//2.注册组件
Vue.component('cpn1',welcome)
const app=new Vue({
el:'#app',
data:{
txtValue:[]
}
})
</script>
-
全局组件和局部组件
全局组件可以在多个Vue实例中使用。如上图代码所示,创建的即为全局组件。
怎么注册局部组件? 在某个Vue实例下注册就是局部组件。
const app=new Vue({
el:'#app',
data:{
txtValue:[]
},
components:{
//2.注册局部组件,此处对象的键名(组件标签名)加不加引号都可以正常运行
cpn1:welcome
}
})
- 父组件和子组件
子组件构造器要写在父组件构造器前面,并在父组件构造器中注册子组件,使用子组件标签。子组件只能在父组件中使用
<div id="app">
<cpn1></cpn1>
</div>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.子组件要定义在父组件前面,要不识别不到。
const son=Vue.extend({
template:`<h2>我是子组件</h2>`
})
const father=Vue.extend({
template:`
<div>
<h1>我是组件</h1>
<cpnSon></cpnSon>
</div>
`,
components:{
cpnSon:son
}
})
const app=new Vue({
el:'#app',
components:{
//2.注册局部组件,此处对象的键名(组件标签名)加不加引号都可以正常运行
cpn1:father
}
})
</script>
- 注册组件的语法糖写法
语法糖省去了写Vue.extend()构造器的步骤,只是Vue.component()中不写extend对象名称,而是直接写成extend对象。如: Vue.component('组件标签名',extend对象)
<div id="app">
<!-- <cpn1></cpn1> -->
<cpnSon></cpnSon>
</div>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const father=Vue.extend({
template:`
<div>
<h1>我是组件</h1>
<cpnSon></cpnSon>
</div>
`,
components:{
// 注册组件的语法糖写法,本示例注册的为子组件
cpnSon:{
template:`<h2>我是子组件</h2>`
}
}
})
const app=new Vue({
el:'#app',
components:{
//注册的为局部组件,此处对象的键名(组件标签名)加不加引号都可以正常运行
cpn1:father
}
})
</script>
- 模板的分离写法
方法1:script标签type类型为text/x-template,加标签id属性。注册组件的地方用引号写上分离模板的#id。模板只能有1个根元素,不能有多个根元素。
<div id="app">
<cpn></cpn>
</div>
<script type="text/x-template" id="temp1">
<div>
<h2>分离模板的文字内容</h2>
</div>
</script>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 此处组件标签的名字必须加上引号,如果昌键值对的形式不用加引号
Vue.component('cpn',{
template:'#temp1'
})
const app=new Vue({
el:'#app'
})
</script>
方法2:使用template加id,代替script标签。
<div id="app">
<cpn></cpn>
</div>
<template id="temp1">
<div>
<h2>分离模板的文字内容</h2>
</div>
</template>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 此处组件标签的名字必须加上引号,如果昌键值对的形式不用加引号
Vue.component('cpn',{
template:'#temp1'
})
const app=new Vue({
el:'#app'
})
</script>
- 为什么组件data必须是函数
组件内部不能访问Vue实例中的数据。data函数中需要返回1个对象。主要是组件的复用。每次调用函数,函数内的变量都是新建,所以每个组件实例中的data数据可以做到互不影响。
组件内部也有一个data属性(也可以有metheds属性)。只是这个data属性必须是一个函数,而且这个函数返回一个对象。对象内保存着数据。
<div id="app">
<wd></wd>
<wd></wd>
</div>
<template id="hao">
<div>
<h2>wang{{result}}</h2>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
</template>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('wd',{
template:'#hao',
data(){
return {
result:0
}
},
methods:{
add(){
this.result++
},
sub(){
this.result--
}
}
})
const app=new Vue({
el:'#app'
})
</script>