案例一 点亮星星
通过控制tempScore来控制鼠标滑过离开的分数，当点击确定时，score等于tempScore
写html
<body>
<div id="app" style="width: 700px;margin:100px auto;">
<div>
<span v-for="(item, i) in num" :key="i" class="iconfont"
:class="tempScore>i?'icon-xingxing':'icon-xingxing1'" @mouseleave='tempScore=score'
@mouseenter='tempScore=item' @click='score=tempScore' style="font-size:30px;color: gold;">
</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
num: 10,
tempScore: 3,
score: 3
}
},
})
</script>
</body>
制作组件
- 默认组件有十颗星星，或者客户自定义num，默认初始分数为0，或者客户自定义value
- 组件内部的变量如果有变动，需将props里面的变量加工到data中
- 传入组件的数据类型如果不是字符串，变量名前需要添加冒号
- 监听，当点击时，score改变，将此值传递出去
<body>
<div id="app" style="width: 700px;margin:100px auto;">
<star :value='score' @input='getScore($event)'></star>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('star', {
props: {
num: {
type: Number,
default: 10
},
value:{
type:Number,
default:0
}
},
data() {
return {
score:this.value,
tempScore:this.value
}
},
template: ` <div>
<span v-for="(item, i) in num" :key="i" class="iconfont"
:class="tempScore>i?'icon-xingxing':'icon-xingxing1'" @mouseleave='tempScore=score'
@mouseenter='tempScore=item' @click='score=tempScore' style="font-size:30px;color: gold;">
</span>
</div>`,
watch:{
score(){
this.$emit('input', this.score)
}
},
})
let vm = new Vue({
el: '#app',
data() {
return {
score: 3
}
},
methods:{
getScore(e){
console.log(e)
}
},
})
</script>
</body>
在组件使用时，value和input可以加工成
v-model='aa',aa为value，也为组件传出的值
<body>
<div id="app" style="width: 700px;margin:100px auto;">
<star v-model="score" ></star>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('star', {
props: {
num: {
type: Number,
default: 10
},
value:{
type:Number,
default:0
}
},
data() {
return {
score:this.value,
tempScore:this.value
}
},
template: ` <div>
<span v-for="(item, i) in num" :key="i" class="iconfont"
:class="tempScore>i?'icon-xingxing':'icon-xingxing1'" @mouseleave='tempScore=score'
@mouseenter='tempScore=item' @click='score=tempScore' style="font-size:30px;color: gold;">
</span>
</div>`,
watch:{
score(){
this.$emit('input', this.score)
}
},
})
let vm = new Vue({
el: '#app',
data() {
return {
score: 3
}
},
watch: {
score(){
console.log(this.score)
}
}
})
</script>
</body>
案例二 双重组件 表格
- 利用子组件的label得到表头，利用field得到对象属性通过$parent传到父组件
- 父组件用循环的方式渲染表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container{
width: 800px;
margin: 0 auto;
}
table{
text-align: center;
}
table td,table th{
border: 1px #eee solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="app">
<div class="container" >
<tb :data='userList'>
<tb-col field='age' label='年龄'></tb-col>
<tb-col field='name' label='姓名'></tb-col>
<tb-col field='email' label='邮箱'></tb-col>
</tb>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('tb', {
props:{
data:{
type:Array,
required:true
}
},
data() {
return {
fieldList:[]
}
},
template: `<table style="width: 100%;" >
<tr>
<slot></slot>
</tr>
<tr v-for='item in data'>
<td v-for='key in fieldList'>{{item[key]}}</td>
</tr>
</table>`
})
Vue.component('tb-col', {
props:['field','label'],
template: `<th>{{label}}</th>`,
created() {
this.$parent.fieldList.push(this.field)
},
})
let vm = new Vue({
el: '#app',
data() {
return {
userList: [
{
id: 1111,
name: 'Simba',
age: 20,
email: "xx@qq.com"
},
{
id: 1131,
name: 'Sidgdfhgdfmba',
age: 20,
email: "x33x@qq.com"
}, {
id: 141,
name: 'Simsdfasfba',
age: 20,
email: "xx22@qq.com"
}
]
}
},
})
</script>
</body>
</html>
案例三 具名插槽
- 组件的slot中以
slot name='country'的形式，在使用组件时，使用template v-slot:country的形式，定位到想要插入的插槽位置 -
template v-slot:default代表默认插槽
<body>
<div id="app" style="width: 700px;margin:100px auto;">
<slot1>
<template v-slot:province>
<span>
南京
</span>
</template>
</slot1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('slot1',{
template:`<div>
<div>
国家：<slot name='country'></slot>
</div>
<div>
省份：<slot name='province'></slot>
</div>
</div>`
})
let vm = new Vue({
el: '#app'
})
</script>
</body>
案例四 作用域插槽
- 当组件是循环创建div，且每个div都有插槽的情况下，需要用作用域插槽确定每个插槽插入的内容，作用域插槽的形式是
template v-slot:aa='scope',scope可以解构 - 需要显示的内容通过attribute的形式放在slot上，除了string形式的变量，其他attr前面都要加冒号
<my-list :data='titleList'>
<template v-slot:aa='{id}'>
<button @click='del(id)'>点击</button>
{{id}}
</template>
</my-list>
Vue.component('my-list', {
template: ` <ul>
<li v-for='item in data' >{{item.label}}<slot name='aa' :id='item.field'></slot></li>
</ul>`,
props: ['data']
})
data() {
return {
num1: '1',
num2: 1,
titleList: [{
label: '年龄',
field: 'age'
}, {
label: '姓名',
field: 'name'
}, {
label: '邮箱',
field: 'email'
}],
cols: [{
label: '年龄',
field: 'age'
}, {
label: '姓名',
field: 'name'
}, {
label: '邮箱',
field: 'email'
}],
},
