new Vue({
el:'#app',
data:{
cars:[
{
title:'保时捷',
content:'德国豪华品牌德国豪华品牌德国豪华品牌德国豪华品牌德国豪华品牌德国豪华品牌德国豪华品牌'
},
{
title:'雷克萨斯',
content:'日本豪华品牌日本豪华品牌日本豪华品牌日本豪华品牌日本豪华品牌日本豪华品牌日本豪华品牌'
},
{
title:'红旗',
content:'中国豪华品牌中国豪华品牌中国豪华品牌中国豪华品牌中国豪华品牌中国豪华品牌中国豪华品牌'
}
]
},
// 定义组件
components:{
// 每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
'b-box':{
// 组件的模板
template:`
<div class="box">
<div class="title">{{title}}</div>
<div class="content">
{{content}}
</div>
</div>
`,
// 定义组件标签上的属性
props:["title","content"],
// 注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象
// 但是在组件中，data选项必须是一个方法，由该方法返回一个对象
// 因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。
data() {
return {
name:'我是组件'
}
},
}
}
})
<div id="app">
<b-box v-for="(item,index) in cars" :key="index" :title="item.title" :content="item.content"></b-box>
</div>
2. counter组件
<div id="app">
<div>衣服：<b-counter :count="yfCount" @synccount="syncYfCount">
</b-counter>--{{yfCount}}</div>
<div>裤子：<b-counter :count="kzCount" :min-count="2" :max-count="8" @synccount="syncKzCount">
</b-counter>--{{kzCount}}</div>
<div>鞋子：<b-counter :count="xzCount" :max-count="20" @synccount="syncXzCount">
</b-counter>--{{xzCount}}</div>
</div>
new Vue({
el:'#app',
// 定义数据
data() {
return {
// 衣服的数量
yfCount:3,
// 裤子的数量
kzCount:5,
// 鞋子的数量
xzCount:7
}
},
// 定义方法
methods: {
// 同步衣服的数量
syncYfCount(e){
this.yfCount = e
},
// 同步裤子的数量
syncKzCount(e){
this.kzCount = e
},
// 同步鞋子的数量
syncXzCount(e){
this.xzCount = e
}
},
// 注册组件
components:{
// 注意：组件的名称不要跟原生html元素重名
'b-counter':{
// template选项，用于定义组件的模板
template:`
<div class="counter">
<button @click="jian" :disabled="myCount===minCount">-</button>
<input type="text" :value="myCount" readonly>
<button @click="jia" :disabled="myCount===maxCount">+</button>
</div>
`,
// 组件的props选项，用于定义组件标签上的属性
// props的值可以是一个字符串数组，里面定义每一个标签属性名称，这是简单用法，不能对属性做严格的验证。
// props:["count"]
// props的值可以是一个对象，里面定义每个标签属性名称，以及对应的类型
// props:{
// count:Number
// }
// props的值可以是一个对象，里面定义的每个标签属性名称也可以是一个对象，在这个对象里面定义该属性的完整信息
props:{
// 数量
count:{
// 类型
type:Number,
// 非空
required:true,
},
// 最小值
minCount:{
type:Number,
// 默认值
default:1
},
// 最大值
maxCount:{
type:Number,
default:10
}
},
// 定义组件的数据
data() {
return {
// 从props里面将count的值给myCount复制一份
myCount:this.count
}
},
// 定义组件的方法
methods: {
//数量减方法
jian(){
this.myCount--
},
// 数量加方法
jia(){
this.myCount++
}
},
// 侦听器
watch:{
// 侦听myCount是否发生变化
myCount(){
// 触发自定义事件，注意：事件名称中不能采用大写字母
this.$emit('synccount',this.myCount)
}
}
}
}
})
3. 评分组件
<div id="app">
<div>
质量：<b-star :score="zl" @syncscore="synczl"></b-star>--{{zl}}
</div>
<div>
物流：<b-star :score="wl" @syncscore="syncwl"></b-star>--{{wl}}
</div>
</div>
<hr>
<div id="app2">
<div>
外观：<b-star :score="wg" @syncscore="syncwg"></b-star>--{{wg}}
</div>
<div>
客服：<b-star :score="kf" @syncscore="synckf"></b-star>--{{kf}}
</div>
</div>
// 定义全局组件，让每一个Vue实例都可以使用
Vue.component('b-star', {
template: `
<div class="star">
<i v-for="(item,index) in 10" :key="index" class="iconfont" :class="index<myScore ? 'icon-xingxing' : 'icon-star'"
@mouseenter="mouseenter(index)" @mouseleave="mouseleave" @click="click(index)"></i>
</div>
`,
// 定义组件的标签属性
props: ['score'],
data() {
return {
// 将组件接收到的值，在组件内部中转一下
myScore: this.score,
// 备份一下score值
backMyScore: this.score
}
},
methods: {
// 鼠标进入时，调用的方法
mouseenter(index) {
this.myScore = index + 1
},
// 鼠标离开时，调用的方法
mouseleave() {
this.myScore = this.backMyScore
},
// 鼠标点击时，调用的方法
click(index) {
this.backMyScore = index + 1
}
},
// 侦听器
watch: {
// 侦听myScore的变化
myScore() {
// 触发自定义事件
this.$emit('syncscore', this.myScore)
}
}
})
new Vue({
el: '#app',
// 数据
data() {
return {
// 质量
zl: 0,
// 物流
wl: 0,
}
},
// 方法
methods: {
// 同步质量评分
synczl(e) {
this.zl = e
},
// 同步物流评分
syncwl(e) {
this.wl = e
}
},
// 注意：这里注册的局部组件，方式是：直接在Vue实例内部的components选项中定义组件。
components: {
}
})
// 这里创建的Vue实例，跟上面的Vue实例，不是同一个对象
new Vue({
el: '#app2',
data() {
return {
// 外观
wg: 0,
// 客服
kf: 0
}
},
methods: {
// 同步外观评分
syncwg(e){
this.wg = e
},
// 同步客房评分
synckf(e){
this.kf = e
}
},
})
网友评论