【Vue】混入 插件 插槽

2024-02-25 05:38
文章标签 javascript vue 插件 frontend 插槽 混入

本文主要是介绍【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");},
};
  1. 在入口文件 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");
  1. 通过 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】混入 插件 插槽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/744537。

相关文章

Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2