本文详细探讨Vue中Slot的工作原理，包括层级关系和作用域。通过实例解析，阐述如何使用v-slot进行反向传参，解释了在不同层级组件间的数据交互。特别指出，尽管在HTML中组件可能呈现嵌套结构，但在JS中它们可能处于同一级别。文章还澄清了官方文档中关于后备内容和姓氏显示的误导，帮助读者理解如何正确地使用Slot传递和访问数据。
vue slot插槽的作用域在官方教程中有一条说明：
“父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。”
父级模版可以通过prop把参数传递给子级模版，但是反过来是不推荐的。
插槽v-slot就是用来反向传参的。
首先来看一下层级关系，一下是html页面中的dom元素实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<title>Template</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="components-demo" level="0">
<im-level-11 title="how are you." level="1">
{
{ posts[2].title }}
<im-level-12 :name="posts[1].title" level="1">
<template v-slot:default="slotProps">
{
{ slotProps.user.firstName }}
最低0.47元/天 解锁文章
扫一扫
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
