发表于: 2019-03-23 23:32:22
1 619
今天
1.vue slot\
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定
单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
在子组件的slot标签上绑定需要的值在父组件上使用slot-scope属性,user.data就是子组件传过来的值
2.侧边栏根据后台动态
<label v-for="navMenu in navMenus">
<router-link :to="{ name: 'elc', params: {id:navMenu.entity.name} }">
<el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
:key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value">
<i :class="navMenu.entity.icon"></i>
<span slot="title">{{navMenu.entity.alias}}</span>
</el-menu-item>
</router-link>
路由进来的时候去触发侧边栏的指向,在el-menu里添加了default-active
<!--左侧菜单组件-->
<el-menu
:default-active="isId"
@select="handleSelect"
class="el-menu-vertical-demo"
background-color="#F0F6F6"
text-color="#3C3F41"
active-text-color="#f60">
<NavMenu :navMenus="totalList"></NavMenu>
</el-menu>
模拟数据,引入config.js
明天、
1.完成侧边栏
2.继续侧边栏 新增也买你
评论