废弃了的语法

本节目标：理解“废弃了的语法”的核心思路，并能把它用于实际开发或面试表达。 v-slot ==指令自== Vue 2.6.0 ==起被引入，提供更好的支持== slot ==和== slot-scope attribute ==的== API ==替代方案。==v-slot ==完整的由来参见这份==

RFC

==。在接下来所有的== 2.x ==版本中== slot ==和== slot-scope attribute ==仍会被支持，但已经被官方废弃且不会出现在== Vue 3 ==中。== ==带有== slot attribute ==的具名插槽== ==自== 2.6.0 ==起被废弃。新推荐的语法请查阅====这里====。== ==在== \<template\> ==上使用特殊的== slot attribute==，可以将内容从父级传给具名插槽== (==把====这里====提到过的== \<base-layout\> ==组件作为示例==)==：==

<base-layout>  <template slot="header">    <h1>Here might be a page title</h1>  </template>
<p>A paragraph for the main content.</p>  <p>And another one.</p>
<template slot="footer">    <p>Here's some contact info</p>  </template></base-layout>

==或者直接把== slot attribute ==用在一个普通元素上：==

<base-layout>  <h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>  <p>And another one.</p>
<p slot="footer">Here's some contact info</p></base-layout>

==这里其实还有一个未命名插槽，也就是====默认插槽====，捕获所有未被匹配的内容。上述两个示例的== HTML ==渲染结果均为：==

<div class="container">  <header>    <h1>Here might be a page title</h1>  </header>  <main>    <p>A paragraph for the main content.</p>    <p>And another one.</p>  </main>  <footer>    <p>Here's some contact info</p>  </footer></div>

==带有== slot-scope attribute ==的作用域插槽== ==自== 2.6.0 ==起被废弃。新推荐的语法请查阅====这里====。== ==在== \<template\> ==上使用特殊的== slot-scope attribute==，可以接收传递给插槽的== prop (==把====这里====提到过的== \<slot-example\> ==组件作为示例==)==：==

<slot-example>  <template slot="default" slot-scope="slotProps">    {{ slotProps.msg }}  </template></slot-example>

==这里的== slot-scope ==声明了被接收的== prop ==对象会作为== slotProps ==变量存在于== \<template\> ==作用域中。你可以像命名== JavaScript ==函数参数一样随意命名== slotProps==。== ==这里的== slot="default" ==可以被忽略为隐性写法：==

<slot-example>  <template slot-scope="slotProps">    {{ slotProps.msg }}  </template></slot-example>
slot-scope

attribute ==也可以直接用于非== \<template\> ==元素== (==包括组件==)==：==

<slot-example>  <span slot-scope="slotProps">    {{ slotProps.msg }}  </span></slot-example>
slot-scope

==的值可以接收任何有效的可以出现在函数定义的参数位置上的== JavaScript ==表达式。这意味着在支持的环境下== (==单文件组件====或====现代浏览器==)==，你也可以在表达式中使用==

ES2015

==解构====，如下：==

<slot-example>  <span slot-scope="{ msg }">    {{ msg }}  </span></slot-example>

==使用====这里====描述过的== \<todo-list\> ==作为示例，与它等价的使用== slot-scope ==的代码是：==

<todo-list v-bind:todos="todos">  <template slot="todo" slot-scope="{ todo }">    <span v-if="todo.isComplete">

==✓==

</span>    {{ todo.text }}  </template></todo-list>

> 来自

 <https://cn.vuejs.org/v2/guide/components-slots.html>

废弃了的语法 ​

废弃了的语法