Vue组件的嵌套实践——菜单功能
(组建的嵌套------实践)
本文我们通过代码的展示来了解组件是如何进行嵌套的(所谓代码是最好的语言嘛)
代码效果:
主要就是做一个菜单功能:鼠标点击菜单,展示商品列表
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
.log {
width: 34px;
height: 28px;
border: 1px solid #333;
display: inline;
margin: 10px;
cursor: pointer;
}
.log:hover {
background-color: #333;
color: #fff;
}
.display {
margin: 20px 0;
}
li {
list-style: none;
width: 100px;
height: 130px;
border: 2px solid lightgray;
margin: 0 10px;
float: left;
}
img {
position: absolute;
}
a {
position: absolute;
margin-left: 30px;
margin-top: 90px;
}
</style>
</head>
<body>
<!--准备一个容器-->
<div id="app">
<app :logs="logs" :products="products"></app>
</div>
</body>
<script>
let product = {
props: ['product'],
template: "<div class='display'><li><img :src='product.img' width='100px'><br><a>{{product.name}}</a></li></div>"
}
let log = {
// data: function () {
// return {cid:0}
// },
methods: {
// catshow:function(){
// this.show= !this.show;
// },
},
props: ['log'],
template: "<div> {{log.name}}</div>",
components: {
}
}
let app = {
methods: {
choice: function (i) {
this.cid = i;
}
},
data: function () {
return { cid: 1 }
},
props: ['logs', 'products'],
template: "<div>"
+ "<log class='log' v-for='log in logs' :log='log' @click.native='choice(log.id)'></log>"
+ "<product v-for='product in products' :product='product' v-show='(cid==product.cid)'></product>"
+ "</div>",
components: {
log,
product,
}
}
new Vue({
el: "#app",
data: {
logs: [
{
name: '手机',
id: 1,
},
{
name: '配件',
id: 2,
},
],
products: [
{
cid: 1,
name: '苹果',
img: 'https://img13.360buyimg.com/n7/jfs/t1/113193/29/20766/35565/6227d13dE075d2e5f/dda8594cdee01aa8.jpg',
},
{
cid: 1,
name: '华为',
img: 'https://img14.360buyimg.com/n7/jfs/t1/198531/37/20970/179596/62412c99E5496c3b9/d3283b556a61362a.jpg',
},
{
cid: 1,
name: 'vivo',
img: 'https://img14.360buyimg.com/n7/jfs/t1/99911/23/28317/148231/6253d84fE053e6322/a184745e830e8a72.jpg',
},
{
cid: 2,
name: '充电器',
img: 'https://img13.360buyimg.com/n7/jfs/t1/138557/25/24317/267932/619d940aE80b82399/78319862c1ace8e5.jpg',
},
{
cid: 2,
name: '手机壳',
img: 'https://img13.360buyimg.com/n7/jfs/t1/131611/2/23179/318846/62457e57E0bc96b27/547f968fcbec81aa.jpg',
},
{
cid: 2,
name: '手机膜',
img: 'https://img14.360buyimg.com/n7/jfs/t1/197926/40/10751/272560/61541c7cE454f745d/8835ad348531cabb.jpg',
},
],
},
components: {
app,
}
})
</script>
</html>```
代码解析
(props:子组件;template:样板,模型; components:组件)
1.首先,创建实例new Vue,设置目录logs下的目录id和目录名name,产品products下的产品cid(commodityid),产品名name和产品图片img链接,然后定义组件:app
2.其次,创建app组件,建立子组件[‘logs’, ‘products’],模块template中建立html循环语句(v-for),绑定局部组件,定义局部组件:log, product
3.接着,创建局部组件对象
4.动态绑定:组件app中创建一个methods-choice的方法来获取点击,然后在,模块的html语句中绑定@click.native点击事件,通过v-show来通过id显示对应的商品
5.style样式修改
本文小结
组件的嵌套,我们往往在全局组件中定义一个父组件app去管理其它子组件;
在这个父组件app中,我们又可以通过props去定义其它的子组件,根据需求,我们在子组件中还可以定义其它子组件;
总的来说,就是定义一个全局组件,通过components绑定局部的组件,局部的组件再绑定另外组件,类似套娃。
写在最后
以上仅为个人的实例和总结,有纰漏之处仍需改进。
大家有什么意见和建议都可以在评论区反馈。
感谢大家看完此文,前端小白,谢谢支持。