1.什么是组件?
组件是构成页面中独立结构单元,组件主要以页面结构形式存在,是对结构的抽象
- 能够减少重复代码的编写,提高开发效率。
- 降低代码之间的耦合程度,使项目更易维护和管理。
- 根据业务逻辑实现复杂的项目功能。
2.基本使用
<div id="my">
<mybutton></mybutton>
<template id="mytemplate">
<button v-on:click="count++">点击{{count}}</button>
</template>
</div>
#定义组件
Vue.component('mybutton', {
data: function () {
return {
count: 0
}
},
#直接定义模板
template: '<button v-on:click="count++">点击{{count}}</button>'
#获取模板
template: '#mytemplate'
})
#创建实例
var vm=new Vue({
el:"#my",
data:{
count:0
}
})
3.父子组件传递数据
<div id="my">
<mybutton v-bind:msg="message"></mybutton>
</div>
----------------------------------------
Vue.component('mybutton', {
data: function () {
return {
count: 0
}
},
props:['msg'],
template: '<button v-on:click="count++">{{count}}--{{msg}}</button>'
})
var vm = new Vue({
el:"#my",
data:{
count:0,
message:'消息'
}
})
4.根元素组件
<div id="D">
<blog-post v-for="user in users" v-bind:user="users" v-bind:key="users.name">
</blog-post>
</div>
---------------------
Vue.component('blog-post', {
props:['user'],
template: '<div class="blog-post">\
<span>{{ user.name }}</span>\
<span>{{ user.age }}</span>\
<span>{{ user.sex }}</span>\
</div>'
})
var vm=new Vue({
el:"#D",
data:{
users:[
{name:'张三1',age:20,sex:'男'},
{name:'张三2',age:20,sex:'男'},
{name:'张三3',age:20,sex:'男'},
]
}
})
5.插槽的使用
<my-slot id="D">
张三
</my-slot>
----------------------
Vue.component('my-slot', {
props:[''],
template: '<div class="demo-alert-box">\
<strong>Error!</strong>\
<slot></slot>\
</div>'
})
var vm=new Vue({
el:"#D",
data:{
}
})
6.自定义事件
<my-table id="table">
<table-title></table-title>
<table-data v-for="(user,index) in users" v-bind:user="user" v-bind:index="index"
v-bind:key="user.id" v-on:remove="removeUser(index)"
v-on:see="seeUser(index)"></table-data>
</my-table>
---------------------------------------------------
Vue.component('my-table', {
template: '<table border="1px" width="80%" align="center">\
<slot></slot>\
<slot name="slot1"></slot>\
</table>'
})
Vue.component('table-title',{
template:'<tr>\
<td>ID</td>\
<td>姓名</td>\
<td>年龄</td>\
<td>性别</td>\
<td>操作</td>\
</tr>'
})
Vue.component('table-data',{
props:['user','index'],
template:'<tr>\
<td>{{user.id}}</td>\
<td>{{user.name}}</td>\
<td>{{user.age}}</td>\
<td>{{user.sex}}</td>\
<td>\
<button v-on:click="remove">删除</button>\
<button v-on:click="see">查看</button>\
</td>\
</tr>',
methods:{
remove:function(index){
this.$emit('remove',index);
},
see:function(index){
this.$emit('see',index);
}
}
})
var vm=new Vue({
el:"#table",
data:{
users:[
{id:1,name:'张三1',age:20,sex:'男'},
{id:2,name:'张三2',age:22,sex:'女'},
{id:3,name:'张三3',age:23,sex:'男'},
]
},
methods:{
removeUser:function(index){
this.users.splice(index,1);//删除元素
},
seeUser:function(index){
alert(this.users[index].name+"-"+this.users[index].age+"- "+this.users[index].sex);
}
}
})
7.mixins的使用
mixins是一种分发Vue组件中可复用功能的方式
mixins对象可以包含任何组件以及实例的选项,这些选项将会被合并到最终的选项中
mixins使用的是和
Vue.extend()
一样的选项合并逻辑
也就是说,如果你的混入mixins包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用
-
对于钩子函数
var mixin = { data(){ return {msg:'1'} } } var vm = new Vue({ mixins: [mixin], data:{ msg:'2' } created(){ console.log(this.$data.msg) } }) // => 2
-
对于数据获取
var mixin = { created: function () { console.log(1) } } var vm = new Vue({ created: function () { console.log(2) }, mixins: [mixin] }) // => 1 // => 2
8.render的使用
- render作为渲染函数,它比模板更接近编译器,实现对虚拟DOM的操作
- 字符串模板template的代替方案,允许你发挥 JavaScript 最大的编程能力
<div id="app">
<mydiv>跳转到百度页面</mydiv>
</div>
----------------------------------------
Vue.component('mydiv', {
render(createElement){
return createElement('a',
{
href:'www.baidu.com'
},
this.$slots.default
)
}
})
var vm=new Vue({
el:"#app"
})
对于createElement函数
- 返回的对象并不是一个实际的DOM对象,而是一个描述节点(也称虚拟节点VNode),最终会被Vue进行渲染
- 第一个参数可以是HTML标签和组件选项对象
- 第二个参数可选,一般定义标签的属性
- 第三个参数是子级虚拟节点,可以是字符串文本也可以是插槽对象
<div id="app">
<mydiv>
<template v-slot:header>
导航栏
</template>
<template v-slot:content>
内容
</template>
<template v-slot:footer>
底部栏
</template>
</mydiv>
</div>
----------------------------------------
<script type="text/javascript">
Vue.config.productionTip = false
Vue.component('mydiv', {
render(createElement){
return createElement('div',
[
createElement('header',this.$slots.header),
createElement('content',this.$slots.content),
createElement('footer',this.$slots.footer)
]
)
}
})
var vm=new Vue({
el:"#app"
})
</script>