113 lines
2.5 KiB
HTML
113 lines
2.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">
|
||
<v_header :t="header_title" @change="getChildren"></v_header>
|
||
<div class="content">
|
||
<swiper></swiper>
|
||
这是vue组件
|
||
</div>
|
||
|
||
<v_footer>
|
||
<template v-slot:back>
|
||
<h3 >哈哈哈</h3>
|
||
</template>
|
||
|
||
<template v-slot:icon>
|
||
<a href="">测试</a>
|
||
</template>
|
||
</v_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>
|
||
`,
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
|
||
// 为什么组件内部的data必须是一个方法？？
|
||
// 组件名称 即 标签名
|
||
// 注意：组件名不能和html的标签名一样
|
||
Vue.component('v_header', {
|
||
template: `
|
||
<div class="header">
|
||
<h1 @click="test">我是公共头部: {{ t }}</h1>
|
||
</div>
|
||
`,
|
||
// props: ["t"],
|
||
props: {
|
||
t: {
|
||
default: '默认数值',
|
||
type: String
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
text: '子组件给父组件的数据'
|
||
}
|
||
},
|
||
methods: {
|
||
test() {
|
||
console.log("头部被点击");
|
||
this.$emit('change', this.text)
|
||
}
|
||
},
|
||
components: {
|
||
// swiper: swiperComponent
|
||
swiper
|
||
}
|
||
});
|
||
|
||
Vue.component('v_footer', {
|
||
template: `
|
||
<div class="footer">
|
||
<slot name="back"></slot>
|
||
<h1>{{ text }}</h1>
|
||
<slot name="icon"></slot>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {
|
||
text: '我是公共底部'
|
||
}
|
||
},
|
||
methods: {}
|
||
});
|
||
|
||
new Vue({
|
||
el: '.app',
|
||
data: {
|
||
header_title: '父组件传给子组件的标题'
|
||
},
|
||
methods: {
|
||
getChildren(res) {
|
||
console.log(res);
|
||
}
|
||
},
|
||
components: {
|
||
// swiper: swiperComponent
|
||
swiper
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html> |