【Vue】混入 & 插件 & 插槽

JS.Huang

已于 2022-10-18 21:17:49 修改

阅读量400

点赞数

分类专栏： Vue 笔记文章标签： vue.js vue javascript

于 2022-04-14 15:04:49 首次发布

本文链接：https://blog.csdn.net/Superman_H/article/details/124172304

版权

Vue 笔记专栏收录该内容

28 篇文章 8 订阅

订阅专栏

混入 (混合)

用于代码的复用，分为：局部混合 & 全局混合
一个 [混入对象] 可以包含任意组件选项
当组件使用 [混入对象] 时，所有 [混入对象] 的选项将被 “混合” 进入该组件本身的选项

局部混合

第一步：定义 js 文件

创建 mixin 文件夹、创建 index.js 文件；在 JS 文件中，定义需要复用的数据，并暴露出去

export const mixMethods = {
    methods: {
        mixFun() {
            console.log("minFun");
        },
        fun() {
            console.log("minFun");
        },
    },
    mounted() {
        console.log("mixMounted");
    },
};

export const data = {
    data() {
        return { mixMsg: "mixMsg", msg: "mixMsg" };
    },
};

第 2 步：在需要使用混入的组件中导入该 JS 文件

把 JS 文件导入后，配置 mixins ，获取混入的数据

<template>
    <div>
        <p>{{ msg }}</p>
        <p>{{ mixMsg }}</p>
        <button @click="fun">fun</button>
        <button @click="mixFun">mixFun</button>
    </div>
</template>

<script>
import { mixMethods, data } from "./mixin";

export default {
    name: "App",
    mixins: [mixMethods, data], // 配置 mixins，获取混入的数据
    data() {
        return { msg: "msg" };
    },
    methods: {
        fun() {
            console.log("fun");
        },
    },
    mounted() {
        console.log("mounted");
    },
};
</script>

当 [组件] 和 [混入] 含有同名数据时，以 [组件] 数据优先
同名钩子函数将合并为一个数组，因此都将被调用；并且先调用 [混入] 的钩子，再调用 [组件] 的钩子

全局混合

全局引入：只需在入口文件 main.js 中设置
1. 引入 [混入对象]
2. 注册 [混入对象] （一次只能注册一个 [混入对象] ）

import Vue from "vue";
import App from "./App.vue";

// 全局混入
import { mixMethods, data } from "./mixin"; // 导入 JS 文件
Vue.mixin(mixMethods); // 配置 mixin，获取混入的数据
Vue.mixin(data); // mixin 一次只能配置一个混入对象

Vue.config.productionTip = false;

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

如此，所有组件都会被混入 mixMethods、data 的数据，即可直接在任意组件中使用混入的数据

插件

通常用来为 Vue 添加全局功能
插件其实就是一个包含 install 方法的对象
用法：1、把全局配置都写在一个 JS 文件中，该文件称为 [插件]； 2、在入口文件引入插件并注册

创建 plugin 文件夹、创建 index.js 文件

import { mix } from "../mixin"; // 导入混入文件

export default {
    // install 方法：第 1 参数是构造函数 Vue
    install(Vue) {
        // 阻止生产提示
        Vue.config.productionTip = false;

        // 通过 mixins 方法，获取混入的数据
        Vue.mixin(mix);

        // 全局自定义指令
        Vue.directive("big", {
            inserted(el, binding) {
                el.innerText = binding.value * 10;
            },
        });

        // 给 Vue 原型上添加 1 个方法
        Vue.prototype.hello = () => console.log("hello");
    },
};

在入口文件 main.js 中引入、注册插件

import Vue from "vue";
import App from "./App.vue";

import plugin from "./plugin"; // 导入插件
Vue.use(plugin); // 注册插件

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

通过 Vue.use() 注册插件时，可以传递参数

Vue.use(plugin, 10, 20);

可以在插件中接收参数（第 1 参数始终是构造函数 Vue ）

export default {
    install(Vue, num1, num2) {
        console.log(num1, num2); // 10 20
    }
}

插槽

插槽：用于在子组件中插入数据 / HTML 结构 / 其他组件

默认插槽

在父组件中：
① 将组件标签写成双标签
② 将需要显示的数据写在组件标签里面

<template>
    <div class="container">
        <Son>
            <!-- 编写插槽内容 -->
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.WbYdRehHUCayfya36132_wHaHa" />
        </Son>
        <Son>
            <!-- 编写插槽内容 -->
            <ul>
                <li v-for="(food, index) in foods" :key="index">{{ food }}</li>
            </ul>
        </Son>
        <Son />
    </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
    name: "App",
    components: { Son },
    data() {
        return {
            foods: ["apple", "pear", "litchi"],
        };
    },
};
</script>

<style >
.container {
    display: flex;
    justify-content: space-around;
}

/* 样式写在 App / Son 中都可以 */
img {
    width: 100%;
}
</style>

在子组件中：
① 想把数据显示在哪里，就在哪里写上 slot 标签元素

slot 标签里面可以设置插槽的默认值
不设置默认值时，也可以写成单标签
想显示多少次，就写多少个 slot 标签

<template>
    <div class="son">
        <h3>XXXX分类</h3>
        <slot />
        <slot>插槽的默认内容。没有传入插槽内容时显示</slot>
    </div>
</template>

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

<style>
.son {
    background: skyblue;
    width: 200px;
    height: 300px;
}

h3 {
    text-align: center;
    background: orange;
}
</style>

这里使用脚手架可能会报错 - Component name “xxx“ should always be multi-word - 是 Vue 命名不规范的报错
可以先关闭 Eslint 语法检测：修改 vue.config.js 文件

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false, // 关闭语法检测
});

具名插槽

父组件中：给插槽标签设置 slot="XXX"
子组件中：给 slot 标签设置 name="XXX"

<template>
    <div class="container">
        <Son>
            <!-- 没有 slot 属性，会匹配默认插槽 -->
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.WbYdRehHUCayfya36132_wHaHa" />
            <!-- slot="list"，会匹配对应的具名插槽 -->
            <ul slot="list">
                <li v-for="(food, index) in foods" :key="index">{{ food }}</li>
            </ul>
        </Son>
    </div>
</template>

没有被匹配的 slot 标签，会显示默认的插槽内容

<template>
    <div class="son">
        <h3>XXXX分类</h3>
        <slot name="title"> title 插槽的默认内容 </slot>
        <slot name="list" />
        <slot />
    </div>
</template>

配合 template 标签使用具名插槽

可以用 template 标签包裹多个结构数据，这样就不会影响 HTML 的结构
使用 template 标签包裹时：
父组件中：给 template 标签设置的 slot="XXX" 可以写成 v-slot:XXX，简写为 #XXX （推荐写法！）
子组件中：给 slot 标签设置 name="XXX"

<template>
    <div class="container">
        <Son>
            <!-- 具名插槽 first -->
            <template v-slot:first>
                <p>第 1 个：对应 name 属性值为 first 的 slot 标签</p>
                <p>第 2 个：对应 name 属性值为 first 的 slot 标签</p>
            </template>
            <!-- 具名插槽 second -->
            <template #second>
                <p>第 1 个：对应 name 属性值为 second 的 slot 标签</p>
                <p>第 2 个：对应 name 属性值为 second 的 slot 标签</p>
            </template>
        </Son>
    </div>
</template>

<template>
    <div class="son">
        <h3>XXXX分类</h3>
        <slot name="first"> title 插槽的默认内容 </slot>
        <slot name="second" />
        <!-- 此时 默认插槽没有匹配的数据 -->
        <slot />
    </div>
</template>

$slots

插槽的内容会被存放到 $slots 属性上，以 [VNode 对象] 的形式存储
对于 [默认插槽]，可通过 $slots.default 获取 [VNode 对象] 组成的数组
对于 [具名插槽]，可通过 $slots.插槽名 获取 [VNode 对象] 组成的数组

在子组件中，我们可以通过钩子函数 mounted 中打印 this.$slots 以查看插槽的信息

<script>
export default {
    name: "Son",
    mounted() {
        console.log(this.$slots);
        // { default: Array(1), list: Array(1) } - 上例1
        // { first: Array(2), second: Array(2) } - 上例2 使用 template 标签元素
    },
};
</script>

可以看见，template 标签元素不作为 [VNode 对象]，template 标签元素里面有多少个子元素，则有多少个 [VNode 对象]

作用域插槽

以上 2 种插槽的数据都来自于父组件，作用域插槽的数据来自于子组件

父组件中：
① 给插槽标签设置 scope="dataObj" / slot-scope="dataObj"，以接收数据，dataObj 即 [子组件传递过来的数据] 组成的对象

<template>
    <div class="container">
        <Son>
            <!-- 设置 slot-scope 属性，以接收数据；  接收数据时 使用了解构赋值 -->
            <ul slot-scope="{ push_foods }">
                <li v-for="(food, index) in push_foods" :key="index">
                    {{ food }}
                </li>
            </ul>
        </Son>
    </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
    name: "App",
    components: { Son },
};
</script>

子组件中：
给 slot 标签设置自定义属性，以传递数据
属性值即 [需要传递的数据]，与属性名 (以键值对的形式) 一同挂在 dataObj 上

<template>
    <div class="category">
        <h3>XXXX分类</h3>
        <!-- 设置自定义属性，以传递数据 -->
        <slot :push_foods="foods" />
    </div>
</template>

<script>
export default {
    name: "Category",
    data() {
        return { foods: ["apple", "pear", "litchi"] };
    },
};
</script>

对于具名插槽：设置了 name="XXX" 的 slot 标签，只给设置了 slot="XXX" / slot-scope="XXX" 的插槽标签传递数据

配合 template 标签使用的具名插槽

使用 template 标签时：slot="XXX" 属性可以写成 v-slot:XXX，简写 #XXX
此时，可以不设置 scope="dataObj" / slot-scope="dataObj" 接收数据
而直接使用 v-slot:XXX="dataObj" / #XXX="dataObj" 在 [关联 slot 标签] 的同时 [接收数据]
默认插槽可以使用 #default="dataObj" 接收数据

<template>
    <div class="container">
        <Son>
            <!-- template 标签直接通过 #list 在 [关联 slot 标签] 的同时 [接收数据] -->
            <template #list="{ push_foods }">
                <h4 v-for="(food, index) in push_foods" :key="index">
                    {{ food }}
                </h4>
            </template>
        </Son>
    </div>
</template>

<template>
    <div class="category">
        <h3>XXXX分类</h3>
        <!-- 设置 name 属性、 设置自定义属性 以传递数据 -->
        <slot name="list" :push_foods="foods" />
    </div>
</template>

JS.Huang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Vue】混入 & 插件 & 插槽

# 混入 (混合)- 用于代码的复用，分为：局部混合 & 全局混合- 一个 [混入对象] 可以包含任意组件选项- 当组件使用 [混入对象] 时，所有 [混入对象] 的选项将被 “混合” 进入该组件本身的选项## 局部混合> #### 第一步：定义 js 文件- 创建 mixin 文件夹、创建 index.js 文件；在 JS 文件中，定义需要复用的数据，并暴露出去```jsexport const mixMethods = { methods: {
复制链接

扫一扫