87 lines
1.9 KiB
HTML
87 lines
1.9 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">
|
|
<a-text></a-text>
|
|
<a-footer :list="newsList" @bbb="goto"></a-footer>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<script>
|
|
|
|
Vue.component("a-footer",{
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
default:() => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
title:"导航"
|
|
}
|
|
},
|
|
template:`
|
|
<div class="footer">
|
|
<ul>
|
|
<li v-for="v,i in list" :key="i" @click="change(i)">{{v.title}}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
`,
|
|
methods:{
|
|
change(index) {
|
|
this.$emit("bbb",index)
|
|
}
|
|
}
|
|
|
|
})
|
|
var a = {
|
|
data() {
|
|
return {
|
|
title:"测试",
|
|
aaa: [
|
|
{ id: 1, title: '社会1' },
|
|
{ id: 2, title: '社会2' },
|
|
{ id: 3, title: '社会3' },
|
|
{ id: 4, title: '社会4' },
|
|
]
|
|
}
|
|
},
|
|
template:`
|
|
<div class="text">
|
|
<p>{{title}}</p>
|
|
<a-footer :list="aaa"></a-footer>
|
|
</div>
|
|
`
|
|
}
|
|
var vm = new Vue({
|
|
el:".app",
|
|
data:{
|
|
newsList: [
|
|
{ id: 1, title: '首页1' },
|
|
{ id: 2, title: '首页2' },
|
|
{ id: 3, title: '首页3' },
|
|
{ id: 4, title: '首页4' },
|
|
]
|
|
},
|
|
methods:{
|
|
goto(i) {
|
|
console.log("qqqqq",i);
|
|
}
|
|
},
|
|
components:{
|
|
"a-text":a
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</html> |