匿名插槽
<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>