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

相关文章

HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2