Vue -- 总结 06

匿名插槽

<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>