【Vue】混入 插件 插槽

本文主要是介绍【Vue】混入 插件 插槽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

混入 (混合)

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

局部混合

第一步：定义 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、在入口文件引入插件并注册

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

import { mix } from "../mixin"; // 导入混入文件export default {// install 方法：第 1 参数是构造函数 Vueinstall(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");},
};

2. 在入口文件 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");

2. 通过 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, // 关闭语法检测
});

具名插槽

1. 父组件中：给插槽标签设置 slot="XXX"
2. 子组件中：给 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>

这篇关于【Vue】混入 插件 插槽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---