一、插槽的应用场景

在某些场景中,封装组件,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。由此出现了插槽

二、插槽的内容与出口

1、出口

封装的组件代码如下图所示:

//出口

2、 内容

页面对封装组件的应用

  按钮import myButton from "./components/myButton.vue";

注意:为插槽默认指定内容,代码如下图所示

封装组件的代码:

提交

应用组件代码:

import myButton from "./components/myButton.vue";

运行结果如下图所示:

图一 插槽赋值

图二 插槽默认值

三、插槽的分类

1、一般插槽

只有插槽的出口以及内容(赋值内容或者默认内容),无其他信息,用法如上

2、具名插槽

通俗的说,就是有名字的插槽。有时在一个组件中包含多个插槽出口是很有用的,元素可以有一个特殊的 attributename,用来给各个插槽分配唯一的 ID,以确定每一处要渲染的内容,这类带name的插槽被称为具名插槽 (named slots)。没有提供name出口会隐式地命名为“default”。

要为具名插槽传入内容,我们需要使用一个含v-slot指令的元素,并将目标插槽的名字传给该指令,具体内容如下:

封装组件:

.container {border-radius: 4px;border: 1px solid #ebeef5;background-color: #fff;color: #303133;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);}.title {display: flex;justify-content: space-between;font-size: 20px;font-weight: 500;padding: 18px 20px;border-bottom: 1px solid #ebeef5;box-sizing: border-box;}.content {padding: 20px;}

应用组件:

 标题操作卡片内容是哈哈哈哈import myCard from "./components/myCard.vue";.box-card {width: 480px;}

运行效果

图三 具名插槽的应用

3、作用域插槽

上边的两种插槽有一个共同点:插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的;无法访问子组件的数据,Vue 模板中的表达式只能访问其定义时所处的作用域,这和 JavaScript 的词法作用域规则是一致的,即:

父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。

由此,产生了作用域插槽。

(1)封装组件代码如下:

姓名:{{ item.name }}import {} from "vue";defineProps(["data"]);.list-container {}.list-item {border: 1px solid #ccc;margin-bottom: 10px;padding: 10px;}.first {display: flex;justify-content: space-between;}

(2)应用组件代码如下:

详情import { ref } from "vue";import myList from "./components/myList.vue";const tableArr = ref([{date: "2016-05-02",name: "张峰",province: "江苏省",city: "南京市",address: "南京市江宁区将军大道",zip: 200333,},{date: "2016-05-04",name: "吴丹",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1517 弄",zip: 200333,},{date: "2016-05-01",name: "林天",province: "江苏省",city: "南京市",address: "南京市雨花台区软件大道",zip: 200333,},]);const handleClick = (obj) => {console.log("点击:", obj);};

(3)运行效果如下:

图四 作用域插槽默认展示

图五 作用域插槽传递姓名参数