匿名插槽
<template><div id="app"><!-- 插槽--就是内容的分发 --><MenuPage><div>我是一级菜单</div><div>我是二级菜单</div></MenuPage></div>
</template><script>import MenuPage from '@/components/MenuPage.vue'
export default {name: 'App',components: {MenuPage}
}
</script><style></style>
MenuPage.vue
<template><div><div><!-- <slot> 元素作为承载分发内容的出口 --><!-- 出口写在子组件里面 --><div>一级菜单---<span @click="changeMenu(1)">{{flag1?'收起':"展开"}}</span></div><div v-if="flag1"><div>二级菜单</div><slot></slot></div></div></div>
</template>
<script>
export default{// 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，// 例如 data、computed、watch、methods 以及生命周期钩子等// 每一个.vue文件就是一个组件（一个页面）name:'MenuPage',data(){return{flag1:true,}},methods:{changeMenu(){let that =this;that.flag1 = !that.flag1}}
}
</script>具名插槽
<template><div id="app"><!-- 插槽--就是内容的分发 --><!-- 具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置--><MenuPageName><template #one><h1>this is one</h1></template><template v-slot:two><h1>this is two</h1></template></MenuPageName></div>
</template><script>import MenuPageName from '@/components/MenuPageName.vue'
export default {name: 'App',components: {MenuPageName}
}
</script><style></style>
MenuPageName.vue
<template><div><div><!-- <slot> 元素作为承载分发内容的出口 --><!-- 出口写在子组件里面 --><div>一级菜单---<slot name="one"></slot><span @click="changeMenu(1)">{{flag1?'收起':"展开"}}</span></div><div v-if="flag1"><div>二级菜单</div><slot name="two"></slot></div><div>小明<slot></slot></div></div></div>
</template>
<script>
export default{name:'MenuPageName',data(){return{flag1:true,}},methods:{changeMenu(){let that =this;that.flag1 = !that.flag1}}
}
</script>作用域插槽
<template><div id="app"><!-- 插槽--就是内容的分发 --><!-- 作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容 --><MenuPageArea v-slot="scope">{{ scope.money }}</MenuPageArea></div>
</template><script>import MenuPageArea from '@/components/MenuPageArea.vue'
export default {name: 'App',components: {MenuPageArea}
}
</script><style></style>
MenuPageArea.vue
<template><div><div><!-- <slot> 元素作为承载分发内容的出口 --><div>一级菜单---<span @click="changeMenu(1)">{{flag1?'收起':"展开"}}</span></div><div v-if="flag1"><div>二级菜单</div><slot :money="money"></slot></div></div></div>
</template>
<script>
export default{name:'MenuPageArea',data(){return{flag1:true,money:100}},methods:{changeMenu(){let that =this;that.flag1 = !that.flag1}}
}
</script>Less的基本使用
下载
npm i less
npm i less-loader
<template><div id="app"><LessPageOne></LessPageOne><LessPageTwo></LessPageTwo></div>
</template><script>import LessPageOne from '@/components/LessPageOne.vue'
import LessPageTwo from '@/components/LessPageTwo.vue'
export default {name: 'App',components: {LessPageOne,LessPageTwo}
}
</script><style></style>
LessPageOne.vue
<template><div class='LessPageOne'><h1 class='title'>这是one</h1></div>
</template>
<script>
export default {name: "LessPageOne",data(){return{}}
}
</script>
<style lang='less' scoped>
.LessPageOne{.title{color:red}
}</style>LessPageTwo.vue
<template><div class='LessPageTwo'><h1 class='title'>这是two</h1></div>
</template>
<script>
export default {name: "LessPageTwo",data(){return{}}
}
</script>
<style lang='less' scoped>
// 每一个模版里面的大盒子起一个独一无二的名字
.LessPageTwo{.title{color:yellow}
}
</style>