vue插槽使用（vue插槽用法）



我们接着上一篇文章 10-Vuex在Vue中的导入与配置 来讲。


下一篇文章 12-分发Vue组件：混入 (mixin）

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

匿名插槽是最基本的插槽类型，它不需要指定名称。在子组件中，你可以简单地在模板中放置一个 标签，而在父组件中使用该子组件时，可以插入任何内容来填充这个插槽。如果父组件没有提供任何内容，则插槽会默认显示其内部的备用内容。

具名插槽允许你为插槽指定一个名称，从而可以在一个组件中定义多个插槽，并在父组件中明确地决定内容应该填充到哪一个插槽中。在子组件中，通过为 标签添加 name 属性来定义具名插槽。

作用域插槽是一种特殊的插槽，它允许子组件向父组件传递数据，使得父组件可以访问子组件的作用域中的数据。这样，父组件就可以根据子组件的状态来决定插槽的内容。在子组件中，可以通过 标签的属性来传递数据。

匿名：name默认为default

子组件

应该在子组件中使用插槽slot

此时，再在子组件标签中写内容，生效

后备(默认)内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

在B组件中

当在父组件中指定内容

则这个提供的内容将会被渲染从而取代后备内容

一个不带 name 的 出口会带有隐含的名字“default”，即匿名插槽。

在向具名插槽提供内容时，可以在一个 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称（当然也可以直接放在标签中，如

现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot 的中的内容都会被视为默认插槽的内容。

3.3.1 使用

父组件

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 data，但你也可以使用任意你喜欢的名字。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/82904.html