Vue插槽的作用_vue.js_

1. 默认插槽

概述：

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

使用：

父组件：

子组件：

2. 具名插槽

概述：

有时我们需要多个插槽，来完成对应的数据自定义显示。一个不带 name 的 插槽会带有隐含的名字“default”，即默认插槽。带 name 即为具名插槽。

使用：

父组件：

子组件：

3. 作用域插槽

概述：

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的)可重用模板，来代替已经渲染好的元素。在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样。

在封装组件的过程中，可以为预留的插槽绑定props 数据，这种带有props 数据的 叫做“作用域插槽”。作用域插槽就是在具名插槽的基础上，多了数据的传递。

语法：

# 子组件中 Vue.component('child', { template: ` 
 ` }) # 父组件中 
 // 老写法 
父组件
{{ props.text }}
 // 新写法 

使用：

父组件：

子组件：

到此这篇关于Vue插槽的作用的文章就介绍到这了,更多相关Vue插槽内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！