149 lines
3.6 KiB
HTML
149 lines
3.6 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>Document</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>
|
|
|
|
|
|
<lb-header header-title="购物车的标题" @send="info">
|
|
</lb-header>
|
|
|
|
<div class="content">中间部分</div>
|
|
|
|
<v-footer :arr="list">
|
|
<template v-slot:default="pop">
|
|
<p>{{ pop.item.title }}</p>
|
|
</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:()=>[]
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
send() {
|
|
this.$emit("send", this.test)
|
|
}
|
|
},
|
|
//页面必须在template里面写
|
|
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>
|
|
`
|
|
}
|
|
|
|
|
|
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(){
|
|
console.log("进入详情");
|
|
},
|
|
info(){
|
|
console.log("显示图片预览");
|
|
},
|
|
getData(val) {
|
|
console.log(val);
|
|
}
|
|
},
|
|
components:{
|
|
"v-footer":footer
|
|
},
|
|
})
|
|
</script>
|
|
|
|
</html> |