Vue允许一个组件有多个插槽,这意味着您可以拥有任意数量的插槽。要测试此功能,请将此新代码块复制到test.vue
文件中:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
如果运行应用程序,可以看到hello world
被打印了三次。因此,如果您想添加更多的内容(例如,一个标题、一个带有文本的段落,然后是一个无序的列表),vue允许我们命名作用域,以便它可以标识要显示的特定作用域。在test.vue
文件中命名插槽如下:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
现在,还必须根据要在其中显示HTML元素的槽名来标记这些HTML元素。将此复制到app.vue
文件的模板部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
v-castle语法
当VUE版本2.6发布时,它附带了一个更好的语法来引用名为v-slot
的子组件中的插槽名称,这意味着要替换初始的插槽语法。因此,与其使用这样的槽来替代父组件模板:
1 2 3 |
|
从3.0版开始,它现在将如下所示:
1 2 3 |
|
注意,除了字符串从slot
到v-slot
的细微变化外,还有一个重大变化:v-slot
只能在模板上定义,而不能在任何html元素上定义。这是一个很大的变化,因为它质疑命名插槽的可用性,但截至本文撰写之时,插槽仍然是文档的很大一部分。
作用域插槽
设想一个场景,其中Vue插槽还可以从父组件访问子组件中的数据对象,这是一种具有道具功能的插槽。要说明这一点,请继续,通过将下面的代码块复制到test.vue
文件中,在子组件中创建一个数据对象:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
与普通props
一样,v-bind
指令用于将数据中的团队与父组件中的prop
引用绑定。打开app.vue
文件并将下面的代码块复制到模板部分:
1 2 3 4 5 6 7 8 |
|
如果运行应用程序,您将看到数据对象已成功传递到父组件。
结论
本文向您介绍了vue.js中的插槽,以及它们对内容注入的重要性。您看到了如何设置它,甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。
英文原文地址:https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程入门!!
以上就是Vue.js中使用插槽将数据从父组件传递到子组件的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
4个很 nice 的vue router过渡动效,快来收藏!
更多相关阅读请进入《vue.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者