129 lines
3.5 KiB
HTML
129 lines
3.5 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>component</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app">
|
||
<h2>Vue</h2>
|
||
<p_header :t="header_text" @change="getChildren" v-slot:back>
|
||
</p_header>
|
||
<div class="content">
|
||
<swiper :arr="swiper" @change="gofo">
|
||
<template v-slot:default="{v}">
|
||
<img :src="v.img" alt="">
|
||
</template>
|
||
</swiper>
|
||
</div>
|
||
<div>Vue组件</div>
|
||
<p_footer>
|
||
<template v-slot:icon>
|
||
<a href="">测试</a>
|
||
</template>
|
||
</p_footer>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
||
<script>
|
||
var swiper = {
|
||
template: `
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide" v-for="v,i in arr" @click="typeClick(v,i)">
|
||
<slot :v="v"></slot>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {}
|
||
},
|
||
props:{
|
||
arr:{
|
||
default:() => [],
|
||
type:String
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
// 为什么组件内部的data必须是一个方法？？
|
||
// 组件名称 即 标签名
|
||
// 注意：组件名不能和html的标签名一样
|
||
Vue.component('p_header', {
|
||
template: `<div class="active">
|
||
<h2 @click="test">公共头部:{{ arr }}</h2>
|
||
</div>`,
|
||
// props:["t"],
|
||
props: {
|
||
arr:{
|
||
//数组默认值只能是方法返回空数组
|
||
default: () => [],
|
||
type:Array
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
text: '头部'
|
||
}
|
||
},
|
||
methods: {
|
||
test() {
|
||
this.$emit('change', this.text)
|
||
}
|
||
}
|
||
});
|
||
Vue.component('p_footer', {
|
||
template: `<div class="footer">
|
||
<slot name="back"></slot>
|
||
<h1>公共底部{{ text }}</h1>
|
||
<slot name="icon"></slot>
|
||
</div>
|
||
`,
|
||
$emit: {
|
||
t: {
|
||
default: '$emit默认值',
|
||
type: String
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
text: '底部'
|
||
}
|
||
},
|
||
methods: {}
|
||
})
|
||
new Vue({
|
||
el: '.app',
|
||
data: {
|
||
header_text: '父组件传给子组件的标题',
|
||
swiper: [
|
||
{ id: 1, img: 'https://img.alicdn.com/imgextra/i4/6000000000247/O1CN016OonHt1DhAeHc2POy_!!6000000000247-2-octopus.png' },
|
||
{ id: 2, img: 'https://img.alicdn.com/imgextra/i4/6000000004607/O1CN01iyHGBo1ju3Ueo5MZr_!!6000000004607-0-octopus.jpg' },
|
||
{ id: 3, img: 'https://img.alicdn.com/imgextra/i1/6000000002571/O1CN011s3nON1UrZ6i7EyPo_!!6000000002571-0-octopus.jpg' },
|
||
]
|
||
},
|
||
methods: {
|
||
getChildren(res) {
|
||
console.log(res);
|
||
},
|
||
gofo(res) {
|
||
console.log("进详情");
|
||
},
|
||
fangda() {
|
||
console.log("放大");
|
||
}
|
||
},
|
||
components: {
|
||
swiper
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html> |