12、Vue_封装API、插槽slot/v-slot

一、封装API

一些常用的方法可以封装成API，然后进行调用

• 例子 ：把之前的axios的一个请求封装成api
  1.在创建/src/api/api.js文件

import axios from 'axios'

var host = 'https://dog.ceo';
// 定义成箭头函数，export：导出，提供给他人调用；const  dogs：把dogs定义成常量，为函数名
export const dogs = () => {
    // return axios.get('https://dog.ceo/api/breeds/image/random')
    // return axios.get(url: host+'/api/breeds/image/random')
    return axios.get(url: '${host}/api/breeds/image/random')
};

2.创建个vue文件，进行调用：

<template>
    <div>
        <!--        <button v-on:click="send">发出api封装的请求</button>-->
        响应：<p>{{data}}</p>
        <br>
        图片：
        <el-image :src="url" fit="cover"></el-image>
    </div>
</template>

<script>
    import {dogs} from '../api/api.js'

    export default {
        name: "axios_api",
        data() {
            return {
                data: null,
                url: null
            }
        },
        // 该方法自动触发执行，生命周期的钩子事件
        mounted() {
            // 调用定义好的函数
            dogs()
                .then(
                    response => {
                       // 对响应内容进行提取和赋值（每个接口的处理方式都不一样，这里难封装）
                        this.data = response.data;
                        this.url = response.data.message
                    }
                )
                .catch(function (error) {
                    console.log(error)
                });
        }
    }
</script>

<style scoped>

</style>

3.结果： axios_api

二、v-slot插槽

v-slot：vue2.6以后推荐使用v-slot

• 作用：在父组件中定义v-slot插槽，可以将父组件定义的模块渲染到子组件。所以，如果父组件想要去展示一些需要在data中写入属性的数据，就可以使用该插槽。注意：属性名必需和v-slot中的名称一样
• 例子
  首先看原始代码
  1.父组件App.vue

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!-- 调用test_slot子组件-->
        <test_slot>
            <!-- 把这里的值，传给子类中属性名为a的slot插槽；这块内容会显示出来  -->
            <template v-slot:a>
                this is a
            </template>
           <!-- 这里的内容没有传给插槽，所以不会显示 -->
            test_slot标签里的内容
        </test_slot>
    </div>
</template>


<script>
    import test_slot from "@/components/test_slot";

    export default {

        name: 'app',
        components: {
            test_slot
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

2.子组件test_slot.vue

<template>
    <div>
        {{ user.firstName }}
         <!-- 调用名字为a的插槽 -->
        <slot name="a"></slot>
    </div>
</template>

<script>
    export default {
        name: "v-slot",
        data() {
            return {
                user: {
                    firstName: 'lzl',
                }
            }
        }
    }
</script>

<style scoped>

</style>

结果： 显示插槽a的内容

• data中给插槽的变量传值：App.vue

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!-- 调用test_slot子组件-->
        <test_slot>
            <template v-slot:a>
                this is a
                {{a.name}}
            </template>
           <!-- 这里的内容没有传给插槽，所以不会显示 -->
            test_slot标签里的内容
        </test_slot>
    </div>
</template>


<script>
    import test_slot from "@/components/test_slot";

    export default {

        name: 'app',
        data() {
            return {
                // 属性名字需要和v-loft的名字一样
                a: {
                    name: 'APP的lzl'
                }
            }
        },
        components: {
            test_slot
        }
    }
</script>

<!-- 样式渲染 -->
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

结果： image.png

• 关于插槽的额外补充
  https://www.jianshu.com/p/4ba5ea06640c