一因宇、實現(xiàn)原理：
子組件配置props屬性接受父組件傳來的index值，top子組件采用this.$emit方法傳index值給父組件
二讯检、HTML代碼：
<div class="box">
<my-top @xxx="fnChange"></my-top>
<my-body :curindex="curindex"></my-body>
</div>
三整袁、CSS代碼：
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
}
.hd span.current {
background-color: purple;
color: white;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
color: white;
}
.bd li.current {
display: block;
}
四、JS代碼：
let vm = new Vue({
el: ".box",
data: {
curindex: 0,
},
methods: {
fnChange(index) {
this.curindex = index;
},
},
components: {
//組件1
"my-top": {
data() {
return {
titleArr: ["體育", "娛樂", "新聞", "綜合"],
tempIndex: 0,
};
},
template: `
<div class="hd">
<span @click="change(index)" :class="tempIndex==index?'current':''" v-for='(item,index) in titleArr' :key="item">{{item}}</span>
</div>
`,
methods: {
change(index) {
this.tempIndex = index;
this.$emit("xxx", this.tempIndex);
},
},
},
//組件2
"my-body": {
props: {
curindex: {
default: 0,
},
},
data() {
return {
bodys: [
"我是體育模塊",
"我是娛樂模塊",
"我是新聞模塊",
"我是綜合模塊",
],
};
},
template: `
<div class="bd">
<ul>
<li :class="curindex==index?'current':''" v-for="(item,index) in bodys" :key="item">{{item}}</li>
</ul>
</div>
`,
},
},
});
五志膀、完整代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
}
.hd span.current {
background-color: purple;
color: white;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
color: white;
}
.bd li.current {
display: block;
}
</style>
<script src="./js/vue2.js"></script>
</head>
<body>
<div class="box">
<my-top @xxx="fnChange"></my-top>
<my-body :curindex="curindex"></my-body>
</div>
<script>
let vm = new Vue({
el: ".box",
data: {
curindex: 0,
},
methods: {
fnChange(index) {
this.curindex = index;
},
},
components: {
//組件1
"my-top": {
data() {
return {
titleArr: ["體育", "娛樂", "新聞", "綜合"],
tempIndex: 0,
};
},
template: `
<div class="hd">
<span @click="change(index)" :class="tempIndex==index?'current':''" v-for='(item,index) in titleArr' :key="item">{{item}}</span>
</div>
`,
methods: {
change(index) {
this.tempIndex = index;
this.$emit("xxx", this.tempIndex);
},
},
},
//組件2
"my-body": {
props: {
curindex: {
default: 0,
},
},
data() {
return {
bodys: [
"我是體育模塊",
"我是娛樂模塊",
"我是新聞模塊",
"我是綜合模塊",
],
};
},
template: `
<div class="bd">
<ul>
<li :class="curindex==index?'current':''" v-for="(item,index) in bodys" :key="item">{{item}}</li>
</ul>
</div>
`,
},
},
});
</script>
</body>
</html
