vue基础（五）

动态组件 & 插槽 & 自定义指令 & eslint & axios

一、动态组件

目的：实现组件显示和隐藏的切换

1、component标签的基础用法

//内置的component相当于占位符，is属性的值表示渲染组件的名称
<component :is="comName"></component>

2、动态切换组件的显示与隐藏

<template>
  <div>
    <button @click="comName = 'Left'">显示左侧组件</button>
    <button @click="comName = 'Right'">显示右侧组件</button>

    <div>
        <component :is="conName"></component>
    </div>
  </div>
</template>

<script>
import Left from "./Left.vue";
import Right from "./Right.vue";

export default {
  name: "TestdemoTest",
  data() {
    return {
      comName: "Left",
    };
  },
  components:{
      Left,
      Right
  }
};
</script>

3、keep-alive保持状态

目的：可以把内部的组件缓存，而不是销毁重新生成，保证了组件数据切换之后的数据不被重置

  <keep-alive>
        <component :is="conName"></component>
  </keep-alive>

keep-alive的include和exclude属性

 //include指定哪些组件需要被缓存，多个组件用逗号隔开
 //exclude指定哪些组件不被缓存
 //注意：include和exclude不可同时使用！

 <keep-alive include="Left,Right">
        <component :is="conName"></component>
 </keep-alive>

 <keep-alive exclude="Right">
        <component :is="conName"></component>
 </keep-alive>

4、组件注册名称 && 组件声明时name 的区别

//当提供了name属性值时，组件的名称就为定义的名称MyLeft
name:"MyLeft"

//如果没有定义name。组件名称则为注册时的组件名Left
components:{
   Left
}

二、插槽

1、插槽的基本用法

目的：把组件中不确定的部分定义为插槽，方便后续使用组件时按需写入不同的内容

例如：

在Left.vue组件中写了 <slot></slot>

则在引用left组件时，

  <Left>
      <p>这里可以显示到插槽里</p>
  </Left>

2、v-slot指令

  <!-- vue官方规定，每个slot都有一个name
      如果省略name，则默认为default ，默认组件提供的内容会渲染到名称为default的插槽中  -->
      
  <slot name="default"></slot>

如果要把内容填充到指定的插槽中，必须加上template

<Left>
    <template v-solt:default>
        <p>这里的内容会渲染到名称为defalut的插槽内</p>
    </template>
</Left>

v-slot的简写：#，例如

  <template #default>
        <p>这里的内容会渲染到名称为defalut的插槽内</p>
  </template>

3、具名插槽

含义：有具体的名称的插槽

使用：
在组件中定义插槽

<template>
  <div class="article-container">
    <!-- 文章的标题 -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>
    <!-- 文章的内容 -->
    <div class="content-box">
        <slot name="content"></slot>
    </div>
    <!-- 文章的作者 -->
    <div class="footer-box">
        <slot name="author"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "conArticle",
};
</script>

<style lang="less" scoped>
 .article-container{
     > div{
         min-height: 150px;
     }
     .header-box{
         background-color: lightblue;
     }
     .content-box{
         background-color: lightcoral;
     }
     .footer-box{
         background-color: lightseagreen;
     }
 }
</style>

在使用组件时，将对应内容填充到插槽里

<template>
  <div>
    <Article>
      <template #title>
        <h3>一首歌</h3>
      </template>
      <template #content>
        <div>
          <p>远处的山坡上有两头牛</p>
          <p>公牛对母牛说</p>
          <p>爱老虎油</p>
        </div>
      </template>
      <template #author>
          <p>作者：不知道是谁</p>
      </template>
    </Article>
  </div>
</template>

<script>
import Article from "./Article.vue";

export default {
  name: "TestdemoTest",
  data() {
    return {};
  },
  componets: {
    Article,
  },
};
</script>

<style scoped>
</style>

效果：

 4、作用域插槽

在封装组件时，为预留的<slot>提供属性对应的值，这种用法就叫做“作用域插槽”

<div class="header-box">
        <slot name="title" msg="Hello today!"></slot>
</div>

 <template #title="obj">
        <h3>一首歌</h3>
        <p>{{ obj.msg }}</p>
</template>

作用域插槽的解构赋值

<div class="header-box">
        <slot name="title" msg="hello vue.js" :user="userinfo"></slot>
</div>

<script>
export default {
  name: "TestdemoTest",
  data() {
    return {
       userinfo:{
          name:'zs',
          age:12
        }
    };
  },
};
</script>

 <template #title="{msg, user}">
        <h3>一首歌</h3>
        <p>{{ msg }}</p>
        <p>{{ user.name }}</p>
</template>

 三、自定义指令

1、私有自定义指令

 <h3 v-color>一首歌</h3>
  
  //私有自定义指令节点
  directives:{
    //定义名为color的指令，指向一个对象
   color:{
      bind(el){
        console.log("触发可bind函数")
        el.style.color ='red'
      }
   }
  }

2、update函数

  <h3 v-color="'red'">一首歌</h3>
  <button @click="color = 'green'"></button>

 //私有自定义指令节点
  directives: {
    //定义名为color的指令，指向一个对象
    color: {
      //在dom更新时，会触发update函数
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
     //当bind和update的内容相同，可简写为
    color(el,binding){
      el.style.color = binding.value;
    }
  },

3、全局自定义指令（在main.js中定义）

Vue.directive('color',function(el,bingding){
  el.style.color = bingding.value
})

四、eslint

1、eslint的作用

约束代码风格，例如代码缩进为2之类的

eslint官网2 具体常用规则可在官网中查看，命令对应的规则

五、axios

1、axios的基本语法及常见问题

复习一下axios的用法，get和post

<template>
    <div class="left-box">
       <h3>Left 组件</h3> 
       <button @click="getInfo">发起get请求</button>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'comLeft',
    methods: {
       async getInfo(){
          const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/get')
          console.log(res)
        }
    },
};
</script>

<template>
  <div class="right-box">
    <h3>Right 组件</h3>
    <button @click="postInfo">发起post请求</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "comRight",
  methods: {
    async postInfo() {
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: "zs", age: 20 });
      console.log(res);
    },
  },
};
</script>

2、直接把axios挂到vue原型上并配置请求根路径

由于每个组件实例单独写请求代码太冗余，可以将axios的配置抽离，写到main.js中，再供vue实例使用。

main.js中配置

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

//全局配置axios的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
//把axios挂载到prototype上，供每个。vue组件的实例使用
Vue.prototype.$http = axios;

new Vue({
  render: h => h(App),
}).$mount('#app')

上述配置了$http,我们可在组件中具体使用了

<script>
// import axios from 'axios'
export default {
    name:'comLeft',
    methods: {
       async getInfo(){
          const {data:res} = await this.$http.get('/api/get')
          console.log(res)
        }
    },
};

export default {
  name: "comRight",
  methods: {
    async postInfo() {
      const { data: res } = await this.$http.post('/api/post', { name: "zs", age: 20 });
      console.log(res);
    },
  },
};
</script>

但这样无法实现api接口的复用

本文借鉴b站课程而记录黑马程序员vue前端基础