混入 (混合)
- 用于代码的复用,分为:局部混合 & 全局混合
- 一个 [混入对象] 可以包含任意组件选项
- 当组件使用 [混入对象] 时,所有 [混入对象] 的选项将被 “混合” 进入该组件本身的选项
局部混合
第一步:定义 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 中设置
- 引入 [混入对象]
- 注册 [混入对象] ( 一次只能注册一个 [混入对象] )
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>