今夜，少年对着下着大雨的街道呐喊，却不再彷徨。
少年已经在风雨中得到了他该有的成长。
一场台风，一场雨，是智慧之神送给少年的成长的洗礼。
规划，对我来说太重要了。列夫托尔斯泰说1分钟都要有规划，为啥？不当糊涂虫。做个明白人。
什么是道？这就是道。—— 佚名
✔ （1）1-1 组件的定义及复用性，局部组件和全局组件（1） ✔（2）1-2 组件的定义及复用性，局部组件和全局组件（2） ✔（3）1-3 组件间传值及传值校验 ✔ （4）1-4 单项数据流的理解 ✔（5）1-5 Non-Props 属性是什么 ✔（6）1-6 父子组件间如何通过事件进行通信（1） ✔（7）1-7 父子组件间如何通过事件进行通信（2） ✔（8）1-8 组件间双向绑定高级内容（选学） ✔（9）1-9 使用插槽和具名插槽解决组件内容传递问题（1） ✔（10）1-10 使用插槽和具名插槽解决组件内容传递问题（2） （11）1-11 作用域插槽 （12）1-12 动态组件和异步组件 （13）1-13 基础语法知识点查缺补漏 （14）2-1 使用 Vue 实现基础的 CSS 过渡与动画效果 （15）2-2 使用 transition 标签实现单元素组件的过渡和动画效果（1） （16）2-3 使用 transition 标签实现单元素组件的过渡和动画效果（2） （17）2-4 使用 transition 标签实现单元素组件的过渡和动画效果（3） （18）2-5 组件和元素切换动画的实现 （19）2-6 列表动画 （20）2-7 状态动画 |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 有了具名插槽之后，你会发现当你父组件向子组件传递一些dom的时候，传递一些标签的时候，这些东西传到子组件里面，在做渲染的时候，是不是就会变得更加灵活更加方便了？ |
|
课程内容：
2022.09.14的学习内容：
vue基础入门（中）
1-10 使用插槽和具名插槽解决组件内容传递问题（2）
有的时候我们会遇到这个场景，
代码示例：
就是我再调用一个 myform，回到页面上我们刷新:
你会发现多了一个input框，但是提交按钮不见了，这是为什么呢？
这是因为我使用你子组件的时候就没给你传插槽的值，所以这块slot，你就拿不到slot的内容，就没有东西展示。
一般比如说点击的按钮，我是希望它如果你没传这个插槽，也应该有一个默认的展示，不然的话我这功能就不好用了。
遇到这个场景我们怎么给它一个默认值，我们可以这样去写：
代码示例：
在调用slot的时候，在这两个slot中间写一个default value，然后回到页面上我们刷新，你会发现这个时候它就会出来default value了。
也就是如果你没有传插槽的内容的时候，我去调你插槽发现没有内容，我就会用中间的 default value作为一个默认值。
大家看到的现在default value可以点击，
当然上面这两个组件的调用，你传了插槽，你传了插槽之后我发现你有slot，那么我就不会用默认值了。所以这是slot的一个默认值设定的语法，一定要记住。
还有一些场景，比如说这样的一个例子：
代码示例：
代码解读：
我现在有一个div标签，然后它的名字叫做layout，意思是布局，上面我也使用layout组件。
在这个布局里我把 methods 去掉，它到底要展示什么内容，完全是由父组件来告诉我的，
那么父组件就要告诉它你展示什么样的一些内容，但是子组件里有一些特殊的逻辑，比如说我现在有一个叫做content的区域，
这块我写一个content，
content顶部会有header，底部会有footer，我只管 content 部分的展示，但是头和尾到底要展示什么？需要你父组件调我的时候来告诉我，
我要怎么写？
代码示例：
在这里就要写一个div，传递一个slot进去，告诉你头和尾展示什么。我
告诉你我有一个header，
然后我告诉你我还有一个footer，
执行效果：
你会发现你header和footer就必须在content的上面，
或者你换一个位置，把slot放到content的下边，
我们再来刷新，效果如下：
content变成最上面，header和footer变成最下面了。
也就是说我这么去写这两个东西加在一起是一个slot：
没法做到一个效果 就是我把header放在content上面，footer放在content下面，
只能说把这一个区块整体放在content的上面或者content的下面，有没有办法解决这个问题?
有的有的。我们可以这样去写，在 div标签上给它一个v-slot标签，让它等于一个header，
同样的在下面也给一个v-slot标签，让它等于一个footer:
也就是我告诉你的子组件，我传递的 slot，你把它拆成两个部分，第一个部分起个名字叫做header，第二个部分起个名字叫做footer，
你看你不传的时候，它是个整体，
现在你传了这两个东西，相当于你告诉它把一个大的slot拆成两个部分，分别是header和footer，
那么拆成两个部分，你下面掉这个slot也不能整体去调用了，你必须再加一个name等于footer:
告诉ta你拆分的 slot你要调的是哪一部分，我可以在下面调用的是footer这个部分，
在上面我调 slot的时候，我让name等于header，
保存一下，再回到我们的页面上刷新。这个时候它会有错误，我们看哪里写的不对？
此时代码示例：
我们发现直接把v-slot div 的标签上 它是不认、不会生效的。如果你要这么拆分，还要记住你要在外面加一个template这样的一个占位符，
然后把你的v-slot标签放到template上里面去。
此时代码示例：
写完这样的代码，我们再到页面上刷新，它还会提示我们现在有一点问题：
这块主要的原因我们回到代码里面，我这个语法写的有一些问题， v-slot如果你给它做拆分的时候给它一个名字的话，不要用等号，要用冒号后面跟这个名字，这样的一个语法才是正确的语法：
我们再回到浏览器刷新，就没有任何问题了：
我就可以把你传递过来的slot拆分成两个部分，一部分放在 content的上面，header就展示在这里，一部分放在content的下面，footer就在这里。那么刚才讲的知识点，我们把它叫做具名插槽，怎么理解具名插槽呢？
你可以这么去理解，本身我一个插槽只能一个大的区域一起去使用，但是我要把插槽拆成几个部分，每个部分我在下面可以分开的调用，就要通过一个name来做区分了，
所以我们要给一个大的内容拆成几个小的片段，每个片段要命上名字，这每一个小的片段，我们就把它叫做一个具名插槽，即：
有了具名插槽之后，你会发现当你父组件向子组件传递一些dom的时候，传递一些标签的时候，这些东西传到子组件里面，在做渲染的时候，是不是就会变得更加灵活更加方便了？
随时随地看视频
热门评论
-
i0_0i2022-09-15 0
查看全部评论今天没打卡呀大佬