Parent component sub-assemblies to achieve closure effect is as follows: Click here to show students different hidden div, while not clicked students hidden div,
The effect of the code as follows:
<!DOCTYPE html>
<html lang="en">
<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>
<style>
.title {
width: 120px;
border: 1px solid pink;
line-height: 36px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<collaspe>
<Collaspe-item title = "University students"> University students 1 </ collaspe-item>
<Collaspe-item title = "high school"> high school students 1 </ collaspe-item>
<Collaspe-item title = "junior high school students"> junior high school students 1 </ collaspe-item>
</collaspe>
</div>
</body>
</html>
<script src="./node_modules//vue//dist//vue.min.js"></script>
<script>
// $ children- instances retrieved subcomponents $ parent-- obtain an instance of the parent component
Vue.component("collaspe", {
methods: {
handleChange(childId) {
this.$children.forEach(element => {
if (element._uid != childId) {
element.show = false;
}
});
}
},
template: `<div class = 'box'>
<slot></slot>
</div>`
});
Vue.component("collaspe-item", {
props: ['title'],
mounted() {
console.log(this.$parent)
},
methods: {
change() {
this. $ parent.handleChange (this._uid) // Each component has a respective _uid
this.show = !this.show;
}
},
data() {
return {
show: false
}
},
template: `<div >
<div class = 'title' @click='change'>{{title}}</div>
<div v-show='show'>
<slot></slot>
</div>
</div>`
})
let vm = new Vue({
the '#app'
data: {
},
})
</script>