【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。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2