157 lines
3.8 KiB
HTML
157 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>组件</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app">
|
|
|
|
|
|
<lb-header header-title="首页的标题" @send="home" :arr="list">
|
|
<template v-slot:back>
|
|
<i >返回图标</i>
|
|
</template>
|
|
|
|
<template v-slot:like>
|
|
<i >喜欢图标</i>
|
|
</template>
|
|
</lb-header>
|
|
|
|
<div class="content">中间内容</div>
|
|
|
|
<v-footer :arr="swiperImg">
|
|
<template v-slot:default="pop">
|
|
<img height="100px" :src="pop.item" alt="">
|
|
</template>
|
|
</v-footer>
|
|
|
|
<v-footer :arr="list">
|
|
<template v-slot:default="pop">
|
|
<h2>{{ pop.item.title }}</h2>
|
|
</template>
|
|
</v-footer>
|
|
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<script>
|
|
// 组件 实现封装使用率较高的页面
|
|
// 全局组件
|
|
Vue.component('lb-header', {
|
|
data() {
|
|
return {
|
|
title: '公共头部的标题',
|
|
test: '子组件数据'
|
|
}
|
|
},
|
|
props: {
|
|
headerTitle: {
|
|
type: String,
|
|
default: "默认标题"
|
|
},
|
|
arr: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
send() {
|
|
this.$emit("send", this.test)
|
|
}
|
|
},
|
|
template: `
|
|
<div class="header">
|
|
<div class="back">
|
|
<slot name="back"></slot>
|
|
</div>
|
|
{{ headerTitle }}
|
|
<ul>
|
|
<li v-for="(v,i) in arr">{{ v.title }}</li>
|
|
</ul>
|
|
<button @click="send">点我</button>
|
|
<div class="right">
|
|
<slot name="like"></slot>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|
|
|
|
// 局部组件
|
|
var footer = {
|
|
data() {
|
|
return {}
|
|
},
|
|
props: {
|
|
arr: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
created() {
|
|
this.$parent.$children[0].$data.test = "测试修改"
|
|
console.log();
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
template: `
|
|
<div class="footer">
|
|
底部
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="(v,i) in arr">
|
|
<slot :item="v"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
// 组件间数据传递
|
|
// 父 ---> 子 props
|
|
// 子 ---> 父 $emit 触发提交个事件，把数据抛出去
|
|
// 兄弟组件
|
|
|
|
// 插槽
|
|
//
|
|
var vm = new Vue({
|
|
el: '.app',
|
|
data: {
|
|
list: [
|
|
{ id: 1, title: '新闻1' },
|
|
{ id: 2, title: '新闻2' },
|
|
{ id: 3, title: '新闻3' },
|
|
],
|
|
swiperImg: [
|
|
'https://st-cn.meishij.net/p2/20190613/20190613181442_145.jpg',
|
|
'https://st-cn.meishij.net/p2/20190613/20190613181953_808.jpg'
|
|
]
|
|
},
|
|
methods: {
|
|
home(val) {
|
|
console.log(val);
|
|
console.log("进入详情");
|
|
},
|
|
info() {
|
|
console.log("显示图片预览");
|
|
},
|
|
getData(val) {
|
|
console.log(val);
|
|
}
|
|
},
|
|
components: {
|
|
"v-footer": footer
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |