HelloWorld
登录

2021前端技术面试必备Vue：(二)组件篇

海军

2021-03-30

2094 2 0

上一章已经更新了Vue基础，那么本章将更新Vue中最重要的概念--组件，会介绍到组件的使用，组件传值，插槽的使用，插槽的分类。 当第一章基础掌握差不多了，然后再学习了组件的开发，那么你就可以开发简单的Vue项目，路由文章还没有更新，学习完Router后，就可以开发实战项目了。

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="padding: 0 10px; word-spacing: 0px; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px; line-height: 1.6; letter-spacing: .034em; color: rgb(63, 63, 63); font-size: 16px; word-break: all;"><h1 data-tool="mdnice编辑器" style="font-weight: bold; color: black; font-size: 24px; text-align: center; background-image: url(https://my-wechat.mdnice.com/mdnice/mountain_2_20191028221337.png); background-position: center top; background-repeat: no-repeat; background-size: 95px; line-height: 95px; margin-top: 38px; margin-bottom: 10px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 20px; color: rgb(60, 112, 198); border-bottom: 2px solid #3C7076;">组件探索</span><span class="suffix"></span></h1> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">组件命名两种格式</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-number" style="line-height: 26px;">1.</span> kebab-<span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">case</span><br>my-component-name<br><br><span class="hljs-number" style="line-height: 26px;">2.</span> PascalCase<br>MyComponentName<br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">Prop</span><span class="suffix" style="display: none;"></span></h4> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Prop 命名格式</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 命名使用kebab-case (短横线分隔命名) 命名：</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 如果 使用 驼峰命名 postTitle ==》 post-title</p> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Prop 类型约束</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">默认我们传递时是Prop 为 字符串数组形式；为了更好的管理Prop， 我们可以以对象的形式进行管理。</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">props: {<br> <span class="hljs-attr" style="line-height: 26px;">title</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">String</span>,<br> <span class="hljs-attr" style="line-height: 26px;">likes</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Number</span>,<br> <span class="hljs-attr" style="line-height: 26px;">isPublished</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Boolean</span>,<br> <span class="hljs-attr" style="line-height: 26px;">commentIds</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Array</span>,<br> <span class="hljs-attr" style="line-height: 26px;">author</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Object</span>,<br> <span class="hljs-attr" style="line-height: 26px;">callback</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Function</span>,<br> <span class="hljs-attr" style="line-height: 26px;">contactsPromise</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Promise</span> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// or any other constructor</span><br>}<br><br><br>Vue.component(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'my-component'</span>, {<br> <span class="hljs-attr" style="line-height: 26px;">props</span>: {<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)</span><br> propA: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Number</span>,<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 多个可能的类型</span><br> propB: [<span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">String</span>, <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Number</span>],<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 必填的字符串</span><br> propC: {<br> <span class="hljs-attr" style="line-height: 26px;">type</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">String</span>,<br> <span class="hljs-attr" style="line-height: 26px;">required</span>: <span class="hljs-literal" style="color: #f92672; font-weight: bold; line-height: 26px;">true</span><br> },<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 带有默认值的数字</span><br> propD: {<br> <span class="hljs-attr" style="line-height: 26px;">type</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Number</span>,<br> <span class="hljs-attr" style="line-height: 26px;">default</span>: <span class="hljs-number" style="line-height: 26px;">100</span><br> },<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 带有默认值的对象</span><br> propE: {<br> <span class="hljs-attr" style="line-height: 26px;">type</span>: <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">Object</span>,<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 对象或数组默认值必须从一个工厂函数获取</span><br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">default</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;"></span>) </span>{<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> { <span class="hljs-attr" style="line-height: 26px;">message</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'hello'</span> }<br> }<br> },<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 自定义验证函数</span><br> propF: {<br> <span class="hljs-attr" style="line-height: 26px;">validator</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">function</span> (<span class="hljs-params" style="line-height: 26px;">value</span>) </span>{<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 这个值必须匹配下列字符串中的一个</span><br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> [<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'success'</span>, <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'warning'</span>, <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'danger'</span>].indexOf(value) !== <span class="hljs-number" style="line-height: 26px;">-1</span><br> }<br> }<br> }<br>}) <br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Prop 传递值</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ <em style="font-style: italic; color: black;">任何</em>类型的值都可以传给一个 prop。</p> </blockquote> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">单向数据流</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 父级组件状态发生变化，子组件会随着父级组件变化为最新的状态。反过来不可以，子级组件发生变化，父级组件跟真变化，这样Vue会发出警告</p> </blockquote> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">禁用Attribute继承</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 默认可以给子组件传递任意的 Attribute ，然后子组件接收使用 Attribute。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 但有时，我们想限制给子组件传递 Attribute， 那么该怎么做呢？</p> <ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: decimal;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">首先， 我们应确认子组件要接收哪些Props</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">然后， 在子组件中 定义这个 属性， inheritAttrs: false, 则 就禁止Attribute继承</section></li></ol> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">这样做的目的是为了什么呢？</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 别人在接手开发时，他只能传递只定的Props，不能传递其它的Props</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">Vue.component(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'my-component'</span>, {<br> <span class="hljs-attr" style="line-height: 26px;">inheritAttrs</span>: <span class="hljs-literal" style="color: #f92672; font-weight: bold; line-height: 26px;">false</span>,<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// ...</span><br>})<br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">自定义事件 使用</span><span class="suffix" style="display: none;"></span></h4> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">事件名</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">1.事件名不存在任何自动化的大小写转换。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">2.触发的事件名需要完全匹配监听这个事件所用的名称。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">Vue 官方推荐 事件命名采用 <strong style="font-weight: bold; line-height: 1.75em; color: rgb(74,74,74);">kebab-case</strong></p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.$emit(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'to-A'</span>,<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'参数'</span>)<br><br><br>&lt;A @to-A=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'父级的自定义事件'</span>&gt;<span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">A</span>&gt;</span></span><br><br>methods:{<br> <span class="hljs-attr" style="line-height: 26px;">receiveSon</span>:(e){<br> 接收传递过来的参数<br> <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">console</span>.log(e)<br> }<br>}<br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">插槽</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 所谓插槽：就是 在Vue中， 子组件定义了 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">&lt;slot&gt;&lt;/slot&gt;</code> ， 它就相当于在父组件占据了位置，你可以往里面插入任何数据，可以定义多个slot。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">slot 又分为： 具名slot 默认slot 作用域slot</p> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">具名插槽</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 所谓具名插槽， 就是 插槽有自己的name， 在子组件中定义好，可以在父组件中通过指定来渲染</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 格式： <slot name="自定义"></slot></p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 使用:</p> <ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: decimal;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">先定义好插槽在子组件中</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">在父组件中引入组件，然后在子组件中插入即可</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">3</section></li></ol> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">注意：</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">在使用具名插槽和作用域插槽时，Vue 官方 已经废弃了 slot 和 slot-scope 的使用， 可以 使用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">v-slot</code> 指令</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 子组件</span><br><br>&lt;template&gt;<br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span><br> //具名插槽<br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span> <span class="hljs-attr" style="line-height: 26px;">name</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"head"</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span>Son 组件<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span><br> // 默认插槽<br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span>&gt;</span> <br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">Button</span> @<span class="hljs-attr" style="line-height: 26px;">click</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"toParent"</span>&gt;</span>子向父 传递值<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">Button</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span> <span class="hljs-attr" style="line-height: 26px;">name</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"foot"</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span></span><br><span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span></span><br><br><br><br><br><span class="hljs-comment" style="color: #75715e; line-height: 26px;">//父组件</span><br><br>&lt;template&gt;<br> &lt;div&gt;<br> &lt;h1&gt;Father 组件&lt;/h1&gt;<br> &lt;hr&gt;<br> &lt;Son @receiveToParent="receiveToSon"&gt;<br> &lt;template v-slot&gt;<br> &lt;h1&gt;我是默认插槽&lt;/h1&gt;<br> &lt;/template&gt;<br> &lt;template v-slot:head&gt;<br> &lt;hr&gt;<br> &lt;h1&gt;我是具名插槽 head&lt;/h1&gt;<br> &lt;hr&gt;<br> &lt;/template&gt;<br> &lt;template v-slot:foot&gt;<br> &lt;hr&gt;<br> &lt;h1&gt;我是具名插槽 foot&lt;/h1&gt;<br> &lt;hr&gt;<br> &lt;/template&gt;<br> &lt;/Son&gt;<br><br> &lt;/div&gt;<br>&lt;/template&gt;<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">作用域插槽</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">有时，我们可能遇到这种需求：</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">在插槽内容中能够访问子组件数据，那么就用到作用域插槽。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">简单的说： 父组件在子组件中使用子组件提供的prop数据</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">如何使用呢？</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">​ 1.通过 在子组件 slot 中动态绑定数据 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">&lt;slot :obj='obj'&gt;&lt;/slot&gt;</code></p> <ol start="2" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: decimal;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">在父组件中使用的方法两种</section></li></ol> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">（1）<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">v-slot:default = "son"</code> 使用prop中数据 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">{{son.obj.name}}</code></p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">（2）<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">v-slot= "{obj}"</code> 使用prop中数据 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">{{obj.name}}</code></p> <h6 style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">优先采用第二种，这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。</span><span class="suffix" style="display: none;"></span></h6> </blockquote> <h6 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">注意</span><span class="suffix" style="display: none;"></span></h6> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">默认插槽的缩写语法不能和具名插槽混用会导致作用域不明确</code></p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">出现多个插槽，可以要使用多个template</code></p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 子组件</span><br>&lt;template&gt;<br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span> <span class="hljs-attr" style="line-height: 26px;">:obj</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'obj'</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span> <span class="hljs-attr" style="line-height: 26px;">:obj</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'games'</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">slot</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span></span><br><span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span></span><br><span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">script</span>&gt;</span><span class="javascript" style="line-height: 26px;"><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">default</span> {<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Son'</span>,<br> data () {<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> {<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'测试'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">obj</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'张三'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">age</span>: <span class="hljs-number" style="line-height: 26px;">22</span><br> },<br> <span class="hljs-attr" style="line-height: 26px;">games</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">version</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'版本：0.1'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'王者农药'</span><br> }<br> }<br> },<br><br>}<br></span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">script</span>&gt;</span></span><br><br><br><br><br><span class="hljs-comment" style="color: #75715e; line-height: 26px;">//父组件</span><br>&lt;template&gt;<br> &lt;div&gt;<br> &lt;h1&gt;Father 组件&lt;/h1&gt;<br> &lt;hr&gt;<br> &lt;Son @receiveToParent="receiveToSon"&gt;<br> // 通过v-slot:自定义 = “{}” 使用prop数据<br> &lt;template v-slot:default= "{obj}"&gt;<br> {{obj.name}}<br> &lt;/template&gt;<br> &lt;templatev-slot:other= "{games}"&gt;<br> {{games.name}}<br> &lt;/template&gt;<br> &lt;template v-slot:head&gt;<br> &lt;hr&gt;<br> &lt;h1&gt;我是具名插槽 head&lt;/h1&gt;<br> &lt;hr&gt;<br> &lt;/template&gt;<br><br> &lt;/Son&gt;<br> &lt;/div&gt;<br>&lt;/template&gt;<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">插槽简写</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"> &lt;template #head&gt;<br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">hr</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span>我是具名插槽 head<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">hr</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span><br><br></span></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">动态组件</span><span class="suffix" style="display: none;"></span></h4> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">组件上使用 <code>keep-alive</code> 来达到缓存效果</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">可能你遇到这种需求，第一次点击了首页，然后点击个人主页，返回的时候，首页组件会被重新加载，浪费必要的性能问题，想解决此类为题，Vue中 提供了 在 组件上 动态绑定 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">keep-alive</code> 来处理</p> </blockquote> <h6 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">需要在router中设置router的元信息meta</span><span class="suffix" style="display: none;"></span></h6> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"> {<br> <span class="hljs-attr" style="line-height: 26px;">path</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'/'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Father'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">component</span>: Father,<br> <span class="hljs-attr" style="line-height: 26px;">meta</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">keepAlive</span>: <span class="hljs-literal" style="color: #f92672; font-weight: bold; line-height: 26px;">true</span> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 需要缓存</span><br> }<br> }<br></code></pre> <h6 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">使用$route.meta的keepAlive属性进行判断</span><span class="suffix" style="display: none;"></span></h6> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">&lt;el-col :span=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"24"</span> <span class="hljs-class" style="line-height: 26px;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">class</span></span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"content-wrapper"</span>&gt;<br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">transition</span> <span class="hljs-attr" style="line-height: 26px;">name</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"fade"</span> <span class="hljs-attr" style="line-height: 26px;">mode</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"out-in"</span>&gt;</span><br> //这里需要缓存，使用keep-alive标签包裹<br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">keep-alive</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">router-view</span> <span class="hljs-attr" style="line-height: 26px;">v-if</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"$route.meta.keepAlive"</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">router-view</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">keep-alive</span>&gt;</span><br> //这里不需要缓存<br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">router-view</span> <span class="hljs-attr" style="line-height: 26px;">v-if</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"!$route.meta.keepAlive"</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">router-view</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">transition</span>&gt;</span></span><br><span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">el-col</span>&gt;</span></span><br><br></code></pre> <h2 data-tool="mdnice编辑器" style="font-weight: bold; color: black; font-size: 22px; display: block; text-align: center; background-image: url(https://my-wechat.mdnice.com/mdnice/mountain_2_20191028221337.png); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; margin-bottom: 10px;"></h2> <section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="padding: 0 10px; word-spacing: 0px; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px; line-height: 1.6; letter-spacing: .034em; color: rgb(63, 63, 63); font-size: 16px; word-break: all;"><h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">父组件 向 子组件 传递值 通过在子组件 身上动态绑定传值</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">三部曲：“<br><span class="hljs-number" style="line-height: 26px;">1.</span> 先引入 子组件<br><span class="hljs-number" style="line-height: 26px;">2.</span> 注册 子组件<br><span class="hljs-number" style="line-height: 26px;">3.</span> 使用子组件 传值<br><br><br>例如：<br><br> &lt;template&gt;<br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span>Father 组件<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">hr</span>&gt;</span><br> // 这块动态传递了一个数组对象<br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">Son</span> <span class="hljs-attr" style="line-height: 26px;">:list</span> = <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">list</span> @<span class="hljs-attr" style="line-height: 26px;">receiveToParent</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"receiveToSon"</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">Son</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span></span><br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">script</span>&gt;</span><span class="javascript" style="line-height: 26px;"><br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">import</span> Son <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">from</span> <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'./Son'</span><br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">default</span> {<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Father'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">components</span>: {<br> Son<br> },<br> data () {<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> {<br> <span class="hljs-attr" style="line-height: 26px;">list</span>: [<br> { <span class="hljs-attr" style="line-height: 26px;">title</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'小张中彩票了'</span>, <span class="hljs-attr" style="line-height: 26px;">author</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Mr.Liu'</span> },<br> { <span class="hljs-attr" style="line-height: 26px;">title</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'房价跌倒谷底'</span>, <span class="hljs-attr" style="line-height: 26px;">author</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Mr.Liu'</span> },<br> { <span class="hljs-attr" style="line-height: 26px;">title</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'阿里云便宜了'</span>, <span class="hljs-attr" style="line-height: 26px;">author</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Mr.Liu'</span> }<br> ]<br> }<br> },<br> <span class="hljs-attr" style="line-height: 26px;">methods</span>: {<br> receiveToSon (e) {<br> <span class="hljs-built_in" style="color: #a6e22e; line-height: 26px;">console</span>.log(e)<br> }<br> }<br> }<br> </span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">script</span>&gt;</span></span><br><br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">子组件向父亲传递值 $emit</span><span class="suffix" style="display: none;"></span></h4> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-number" style="line-height: 26px;">1.</span> 子组件 通过<span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.$emit(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'事件名称'</span>，传递参数)<br><span class="hljs-number" style="line-height: 26px;">2.</span> 在父子组件中 通过 在子组件身上 @事件名称 = 自定义的事件 来接收参数<br><br>&lt;template&gt;<br> <span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span>Son 组件<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">h1</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">ul</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">li</span> <span class="hljs-attr" style="line-height: 26px;">v-for</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"(item,index) of list"</span> <span class="hljs-attr" style="line-height: 26px;">:key</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"index"</span>&gt;</span> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">h2</span>&gt;</span>{{item.title}}<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">h2</span>&gt;</span> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">br</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">h3</span>&gt;</span>{{item.author}}<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">h3</span>&gt;</span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">li</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">ul</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">Button</span> @<span class="hljs-attr" style="line-height: 26px;">click</span>=<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">"toParent"</span>&gt;</span>子向父 传递值<span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">Button</span>&gt;</span><br> <span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">div</span>&gt;</span><br><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">template</span>&gt;</span></span><br><span class="xml" style="line-height: 26px;"><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;<span class="hljs-name" style="color: #f92672; line-height: 26px;">script</span>&gt;</span><span class="javascript" style="line-height: 26px;"><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">default</span> {<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'Son'</span>,<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 通过prop 来接收 父组件传递过来的数据</span><br> props: [<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'list'</span>],<br> data () {<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> {<br> <span class="hljs-attr" style="line-height: 26px;">name</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'测试'</span><br> }<br> },<br> <span class="hljs-attr" style="line-height: 26px;">methods</span>: {<br> toParent () {<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 子组件 通过 this.$emit(事件名，要传递的参数)</span><br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.$emit(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'receiveToParent'</span>, <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.name)<br> }<br> }<br>}<br></span><span class="hljs-tag" style="color: #f92672; line-height: 26px;">&lt;/<span class="hljs-name" style="color: #f92672; line-height: 26px;">script</span>&gt;</span></span><br><br></code></pre> </section> </section> <br/> <br/> <center><h3>觉得不错的点赞，帮忙转发分享以下，原创不易！<h3/><center/>
点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段，为你的工作保驾护航

有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )