[JavaScript知识库] vue 进阶

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue 进阶 -> 正文阅读

[JavaScript知识库]vue 进阶

文章目录

动态class与动态style

详解：通过vue中的v-bind来动态绑定标签的类名与样式

<template>
   <div class="Home">
     <p :class="{black:isBlack,yellow:isYellow}">对象形式绑定class</p>
     <p :class="[black,yellow]">数组形式动态绑定class</p>
     <p :style="styleData">动态绑定Style</p>
   </div>
</template>
<script>
export default {
     //组件名字-十七
   name: '',
     //存放数据
   data() { 
    return {
       styleData:{
         fontSize:'30px',
         color:"pink",
         backgroundColor:"#ff5555"
       },
       black:'timi',
       yellow:'tianmei',
       isBlack:true,
       isYellow:true
    }
  }
}
</script>
<style lang='scss' scoped>
.timi{
  color: #ff5;
  background: #ff5500;
}
.tianmei{
  font-size: 40px;
  text-align: left;
}
.black{
  color: red;
  background:lightblue;
}
.yellow{
  font-size: 50px;
  text-shadow: 0 0 10px #ddd;
}
</style>

动态绑定class与静态绑定class结合使用：

利用数组的形式，数组中可以掺杂对象类型class

<el-button size="small" :class="[{active:flag},'border-top-right-radius-0','border-bottom-right-radius-0']" @click="ming">明细</el-button>

style对象与style字符串

tabBarStyle="textAlign: center;borderBottom: unset"  //字符串方式
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  //对象方式

slot 插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

匿名插槽（基础使用）

<!--父组件-template-->
<SlotChild :url="database.url">{{database.title}}</SlotChild>
<!--父组件-script-->
   data() { 
    return {
       database:{
         title:"百度一下",
         url:"www.baidu.com"
       }
    }

<!--子组件template-->
 <a :href="url"><slot>默认内容，父组件不传递内容时，则会显示</slot></a>
 <!--子组件script-->
  props: {
       url:{
         type:String,
         default(){
           return ""
         }
       }
  }

效果如下
在这里插入图片描述

作用域插槽

提示：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

<!--子组件template-->
<a :href="database.url"><slot :slotData="database" :ting='666'></slot></a>
<!--子组件script-->
data() {
    return {
      database: {
        title: "哔哩哔哩",
        url: "https://www.bilibili.com/",
      },
    };
  }

<!--父组件template-->
     <SlotChild>
     
       <template v-slot="slotProps">
         {{slotProps.slotData.title}}
       </template>
       
       <!--或-->
       <template v-slot="{slotData,ting}">
         {{slotProps.slotData.title}}
       </template>
       <!---->
       
     </SlotChild>
  <!--父组件script-->
    data() { 
     return {
       database:{
         title:"百度一下",
         url:"www.baidu.com"
       }
    }
  }

效果如下
在这里插入图片描述

作用域插槽：子组件通过<slot></slot>上绑定自定义属性，父组件通过v-slot指令接收子组件绑定的自定义属性。
应用场景：插槽的内容可能想要同时使用父组件域内和子组件域内的数据

具名插槽

<!--父组件template-->
     <SlotChild>
       <template #header>  <!-- v-slot：可简写为# -->
         {{database.title}}
       </template>
       <template v-slot:footer>
         {{database.url}}
       </template>
     </SlotChild>
 <!--父组件script-->
    data() { 
     return {
       database:{
         title:"百度一下",
         url:"www.baidu.com"
       }
    }
  }

<!--子组件template-->
    <a :href="url"><slot name="header"></slot></a>
    <br>
    <a :href="url"><slot name="footer"></slot></a>

效果如下
在这里插入图片描述
4. 动态插槽名

<template #[dynamicSlotName]></template>

动态组件

应用场景：当我们不确定接下来呈现的的组件是哪个组件时，我们可以用动态的方式绑定组件

<template>
    <div id="app">
        <div v-for='item in dataList' :key="item.id">
            <components :is="item.name"></components>
        </div>
    </div>
</template>
<script>
import hello from './components/HelloWorld.vue';
import tinghua from "./components/tingHua.vue"
export default {
    components:{
        hello,
        tinghua
    },
    data() {
        return {
            dataList:[
                {name:'tinghua',id:'10086'},
                {name:'hello',id:'10010'}
            ]
        }
    }
}
</script>

效果如下：
在这里插入图片描述

异步组件

按需加载组件，一些场景下优化页面加载速度

components:{
    hello:()=>import('./components/HelloWorld.vue')   
},

keep-alive

应用场景：频繁切换，避免重复渲染组件。

概述：<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

include-字符串或正则表达式，只有匹配的组件会被缓存
exclude-字符串或正则表达式，任何匹配的组件都不会被缓存

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="helloWord,tingHua">
    <hello v-if="flag"></hello>      <!--hello组件需要设置对应的name属性(helloWord),否则将不会缓存-->
    <!--在 3.2.34 或以上的版本中, 使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。-->
    <tinghua v-if="flag"></tinghua>  <!--!只会显示hello组件(并会缓存),keepAlive组件中只能存在一个子元素，则tinghua组件不会显示-->
</KeepAlive>
<!--keepAlive会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。-->

<!-- 正则表达式 (需使用 `v-bind`) -->
<keep-alive :max='5' :include="/helloWord|tingHua/">  <!--max 最大缓存数-->
    <hello v-if="flag"></hello>
    <tinghua v-if="!flag"></tinghua>
</keep-alive> 

<!-- 数组 (需使用 `v-bind`) -->
<keep-alive :include="['helloWord', 'tingHua']">
    <hello v-if="flag"></hello>
    <tinghua v-if="!flag"></tinghua>
</keep-alive>

keepAlive组件的使用会衍生出两个新的生命周期，activated与deactivated详情参考vue中的生命周期

mixins

应用场景：公共逻辑抽离，多个组件会使用相同的代码逻辑。

组件中使用mixins

import Minxins from './assets/mixins'   //引入mixins文件
export default {
    mixins:[Minxins]   //进行注册，多个用逗号分开
}

mixins文件

export default {
    mounted(){
        console.log('minxins——mounted')
    },
    data(){
        return{
            count:10086
        }
    },
    methods:{
        clickAdd(){
            console.log(this.count);   //10086 使用mixins的组件中的事件
        }
    }
}