<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/category.css">
</head>
<body>
<div id="app">
<div class="header">
分类
</div>
<div class="main">
<!-- 菜单 -->
<!-- <div class="left">
<ul v-if="list.length">
<li v-for="(item,index) in list" @click="toggle(item.id)">{{item.title}}</li>
</ul>
</div> -->
<menu1 @send-id="toggle"></menu1>
<!-- 列表组件 -->
<list :cur-id="curId"></list>
</div>
<div class="footer">
footer
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
//列表组件
const List = {
props: ["curId"],
data(){
return {
list: []
}
},
template: `
<div class="right">
<ul v-if="list.length">
<li v-for="(item,index) in list">{{item.proName}}</li>
</ul>
</div>
`,
created(){
this.getData()
},
methods:{
getData(){
axios.get(`http://localhost:3000/goods/${this.curId}`)
.then(res=>{
// console.log(res.data);
this.list = res.data.items
})
},
},
watch: {
curId(){
this.getData()
}
}
}
const Menu1 = {
template: `
<div class="left">
<ul v-if="list.length">
<li v-for="(item,index) in list" @click="toggle(item.id)">{{item.title}}</li>
</ul>
</div>
`,
data(){
return {
list: []
}
},
created(){
this.getCategoryData()
},
methods: {
// 获取分类数据
getCategoryData(){
axios.get("http://localhost:3000/category")
.then(res=>{
this.list = res.data
})
},
//切换标签
toggle(id){
this.$emit("send-id",id)
}
}
}
//父组件
var vm = new Vue({
el: '#app',
data: {
curId: 1
},
components: {
List,
Menu1
},
methods: {
toggle(id){
this.curId = id
}
}
});
</script>
</body>
</html>
`sssssssss`
