脚本宝典收集整理的这篇文章主要介绍了

关于Vue slot插槽 我想说的事

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>春节<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-2.6.0发布后,对slot插槽进行了一定的优化,那么对于插槽,你真正的了解吗?以下是我使用中总结的拙见,欢迎批评指正+++++</p> <p>最近在做业务组件的时候,用到三种slot,被叫做”默认插槽“,”具名插槽“,”作用域插槽“。</p> <h2 id="articleHeader0"><strong>默认插槽</strong></h2> <p>子组件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a v-bind:href=&quot;url&quot; class=&quot;nav-link&quot;><br /> <slot>content</slot><br /> </a>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-b<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>d:href</span>=<span class="hljs-string">"url"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-<a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a>"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span>content<span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre> <p>父组件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<navigation-link url=&quot;/profile&quot;> <p> Your Profile</p> </navigation-link>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">navigation-link</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/profile"</span>&gt;</span> Your Profile <span class="hljs-tag">&lt;/<span class="hljs-name">navigation-link</span>&gt;</span></code></pre> <p>如果父组件为这个插槽提供了内容Your Profile,则默认的内容content会被替换掉。</p> <h2 id="articleHeader1"><strong>具名插槽</strong></h2> <p>如果子组件中的多个位置都需要父组件塞进不同的内容时,你需要使用具名插槽。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="</p> <div class=&quot;container&quot;> <header> <slot name=&quot;header&quot;></slot><br /> </header> <p> <main><br /> <slot name-&quot;main&quot;></slot><br /> </main></p> <footer> <slot name=&quot;footer&quot;></slot><br /> </footer> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>=<span class="hljs-string">"header"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">main</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name-</span>"<span class="hljs-attr">main</span>"&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"footer"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>子组件在header ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a> footer三处需要塞入不同的内容,在父组件的 &lt;template&gt; 元素上使用 slot特性:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<base-layout><br /> <template slot=&quot;header&quot;></p> <h1>Here might be a page title</h1> <p> </template></p> <p>A paragraph <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> the ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a> content.</p> <p>And another one.</p> <p> <template slot=&quot;footer&quot;></p> <p>Here's some contact info</p> <p> </template><br /> </base-layout>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">base-layout</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"header"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Here might be a page title<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>A paragraph <a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a> the main content.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>And another one.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"footer"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Here's some contact info<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">base-layout</span>&gt;</span></code></pre> <p>看起来具名插槽能解决大部分的问题了,但是,在这种情况面前使用具名插槽会<strong>报错</strong>:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div v-for=&quot;(item, index) in resultList&quot; :key=&quot;index&quot;> <div class=&quot;list-content&quot;> <p class=&quot;content&quot; v-html=&quot;item.content&quot;> <p> <slot name=&quot;content&quot;></slot> </div> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item, index) in resultList"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-content"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"item.content"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"content"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre> <p>当使用v-<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>迭代,同一具名插槽重复出现的时候,浏览器就会报错<br />这时我们不得不使用<strong>作用域插槽</strong></p> <h2 id="articleHeader2"><strong>作用域插槽</strong></h2> <p>在 &lt;template&gt; 上使用特殊的 slot-scope 特性,可以接收传递给插槽的 prop</p> <p>子组件内两处地方放置两处插槽</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <!--位置1--><br /> <slot name=&quot;tips&quot; :tips=&quot;item.access&quot;></slot></p> <p><!--位置2--><br /> <slot name=&quot;content&quot; :content=&quot;item.content&quot;></slot>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-comment">&lt;!--位置1--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tips"</span> <span class="hljs-attr">:tips</span>=<span class="hljs-string">"item.access"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-comment">&lt;!--位置2--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"content"</span> <span class="hljs-attr">:content</span>=<span class="hljs-string">"item.content"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span></code></pre> <p>父组件-使用时,slot=<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a> 具名,调用scope.[<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>]</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template slot=&quot;tips&quot; slot-scope=&quot;scope&quot;><br /> <span class=&quot;item-header-state&quot; v-if=&quot;scope.tips === true&quot;><i class=&quot;el-icon-check&quot; ></i>已认证</span><br /> </template></p> <p><template slot=&quot;content&quot; slot-scope=&quot;scope&quot;><br /> <el-tag v-for=&quot;(tag, index) in scope.content.labels&quot; :key=&quot;index&quot; closable type=&quot;info&quot; size=&quot;small&quot; :disable-transitions=&quot;false&quot; @close=&quot;handleCloseTag(tag, scope.content)&quot;><br /> {{tag.label}}<br /> </el-tag><br /> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;template slot=<span class="hljs-string">"tips"</span> slot-scope=<span class="hljs-string">"scope"</span>&gt; &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"item-header-state"</span> v-<span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>=<span class="hljs-string">"scope.tips === <a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a>"</span>&gt;&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"el-icon-check"</span> /&gt;已认证&lt;/span&gt; &lt;/template&gt; &lt;template slot=<span class="hljs-string">"content"</span> slot-scope=<span class="hljs-string">"scope"</span>&gt; &lt;el-tag v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"(tag, index) in scope.content.labels"</span> :key=<span class="hljs-string">"index"</span> closable <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"info"</span> size=<span class="hljs-string">"sm<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>"</span> :disable-transitions=<span class="hljs-string">"<a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a>"</span> <span class="hljs-meta">@<a href="http://www.js-code.com/tag/close" title="浏览关于“close”的文章" target="_blank" class="tag_link">close</a></span>=<span class="hljs-string">"handleCloseTag(tag, scope.content)"</span>&gt; {{tag.label}} &lt;/el-tag&gt; &lt;/template&gt;</code></pre> <p><strong>But</strong> 自 2.6.0 起以上被废弃。新推荐的语法请查阅<a href="https://juejin.im/post/5c8856e6e51d456b30397f31#comment" rel="nofollow noreferrer" target="_blank">这里</a>。</p> <h3 id="articleHeader3">【以下为引用内容】</h3> <hr> <hr> <h2 id="articleHeader4">插槽和具名插槽</h2> <p>父组件以另外一种方式(不是通过常规的 <a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s 属性传递机制)向子组件传递信息。我发现把这种方法同常规的 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 元素联系起来很有帮助。</p> <p>比如说 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 标签。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<a href=”/sometarget&quot;>This is a link</a>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">”/sometarget</span>"&gt;</span>This is a link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre> <p>如果这是在 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 环境中并且 <code>&lt;a&gt;</code> 是你的组件,那么你需要发送“This is a <a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a>”信息到‘a’组件里面,然后它将被渲染成为一个超链接,而“This is a <a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a>”就是这个链接的文本。</p> <p>让我们定义一个子组件来展示它的机制是怎样的:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div> <slot></slot> </div> <p></template><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>然后在父组件我们这么做:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div> <child-component>This is from outside</child-component> </div> <p></template><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span>&gt;</span>This is from outside<span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>这时候屏幕上呈现的就应该和你预期的一样就是“This is from outside”,但这是由子组件所渲染出来的。</p> <p>我们还可以给子组件添加默认的信息,以免到时候这里出现什么都没有传入的情况,就像这样子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div> <slot>Some <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> message</slot> </div> <p></template><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span>Some <a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a> message<span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>然后如果我们像这样子创建我们的子组件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<child-component><br /> </child-component><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">child-component</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> </code></pre> <p>我们可以看到屏幕上会呈现“Some <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> message”。</p> <p>具名插槽和常规插槽非常类似,唯一的差别就是你可以在你的目标组件多个位置传入你的文本。</p> <p>我们把子组件升级一下,让它有多个具名插槽</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div> <slot>Some default message</slot><br /> <br /> <br /> <slot _name_=&quot;top&quot;></slot><br /> <br /> <br /> <slot _name_=&quot;bottom&quot;></slot> </div> <p></template><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span>Some default message<span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">_name_</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">_name_</span>=<span class="hljs-string">"bottom"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> </code></pre> <p>这样,在我们的子组件中就有了三个插槽。其中 top 和 bottom 插槽是具名插槽。</p> <p>让我们更新父组件以使用它。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<child-component _v-slot:top_><br /> Hello there!<br /> </child-component><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">_v-slot:top_</span>&gt;</span> Hello there! <span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> </code></pre> <p>注意 —— 我们在这里使用新的 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 2.6 语法来指定我们想要定位的插槽:<code>v-slot:theName</code>。<br />你现在认为会在屏幕上看到什么呢?如果你说是“Hello Top!”,那么你就只说对了一部分。<br />因为我没有为没有具名的插槽赋予任何值,我们因此也还会得到默认值。所以我们真正会看到的是:<br />Some default message<br />Hello There!<br />其实真正意义上没有具名的插槽是被当作‘default’,所以你还可以这么做:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<child-component _v-slot:default_><br /> Hello There!<br /> </child-component><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">_v-slot:default_</span>&gt;</span> Hello There! <span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> </code></pre> <p>现在我们就只会看到:</p> <p>Hello There!</p> <p>因为我们已经提供了值给默认(也就是未具名)插槽,因此具名插槽‘top’和‘bottom’也都没有默认值。</p> <p>你发送的并不一定只是文本,还可以是其他组件或者 <a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>。你可以发送任意你想展示的内容。</p> <h2 id="articleHeader5">作用域插槽</h2> <p>我认为插槽和具名插槽相对简单,一旦你稍微玩玩就可以掌握。可另一方面,作用域插槽虽然名字相似但又有些不同之处。<br />我倾向于认为作用域插槽有点像一个放映机(或者是一个我欧洲朋友的投影仪)。以下是原因。<br />子组件中的作用域插槽可以为父组件中的插槽的显示提供数据。这就像一个人带着放映机站在你的子组件里面,然后在父组件的墙上让一些图像发光。<br />这有一个例子。在子组件中我们像这样设置了一个插槽:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div> <slot _name_=&quot;top&quot; __myUser_=&quot;user&quot;></slot><br /> <br /> <br /> <slot _name_=&quot;bottom&quot;></slot><br /> <br /> </div> <p></template></p> <p><script></p> <p>data() { _<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a>_ { user: &quot;Ross&quot; } }</p> <p></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">_name_</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">_:myUser_</span>=<span class="hljs-string">"user"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">_name_</span>=<span class="hljs-string">"bottom"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> data() { _<a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a>_ { user: <span class="hljs-string">"Ross"</span> } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>注意到我们的具名插槽‘top’现在有了一个名为‘myUser’的属性,然后我们绑定了一个动态的值在‘user’中。</p> <p>在我们的父组件中就像这样子设置子组件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div> <child-component _v-slot:top_=&quot;slotProps&quot;>{{ slot<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s }}</child-component> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">_v-slot:top_</span>=<span class="hljs-string">"slot<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>s"</span>&gt;</span>{{ slotProps }}<span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre> <p>我们在屏幕上看到的就是这样子:<br />{ “myUser”: “Ross” }<br />还是使用放映机的类比,我们的子组件通过 myUser 对象将其用户字符串的值传递给父组件。它在父组件上投射到的墙就被称为‘slotProps’。<br />我知道这不是一个完美的类比,但当我第一次尝试理解这个机制的时候,它帮助我以这种方式思考。<br />Vue 的文档非常好,而且我也已经看到了一些其他关于作用域插槽工作机制的说明。但很多人采取的方法似乎是将父组件中的所有或部分属性命名为与子组件相同,我认为这会使得数据很难被追踪。<br />在父组件中使用 ES6 解构,我们这样子写还可以将特定 user 对象从插槽属性(你可以随便怎么称呼它)解脱出来:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<child-component _v-slot:top_=&quot;{myUser}&quot;>{{ myUser }}</child-component><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">_v-slot:top_</span>=<span class="hljs-string">"{myUser}"</span>&gt;</span>{{ myUser }}<span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> </code></pre> <p>或者甚至就只是在父组件中给它一个新的名字:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<child-component _v-slot:top_=&quot;{myUser: aFancyName}&quot;>{{ aFancyName }}</child-component><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">_v-slot:top_</span>=<span class="hljs-string">"{myUser: aFancyName}"</span>&gt;</span>{{ aFancyName }}<span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> </code></pre> <p>所有都是通过 ES6 解构,与 Vue 本身并没有什么关系。</p> <p>如果你正开始使用 Vue 和插槽,希望这可以让你起步并解决一些棘手的问题。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

关于Vue slot插槽 我想说的事

全部内容,希望文章能够帮你解决

关于Vue slot插槽 我想说的事

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过