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

说一说Vue(2.0)组件的通信方式

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>(2.0)是组件化的开发模式,在不借助vuex框架的前提下,组件之间如何通信呢?接下来我在开发中总结了几种情况。<br /><strong>1.父组件给子组件传值(props):</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="父组件给子组件传值的方式主要是用函数props,具体操作如下 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>父组件给子组件传值的方式主要是用函数props,具体操作如下 </code></pre> <p>子组件部分</p> <blockquote> <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>{{ message }}</p> <div></div> <p> </template> </p> <p> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name=&quot;child&quot;, props:['message'], //利用props函数,定义一个“message”变量 data(){</p> <p> } } <script></script>" 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"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span>{{ message }}<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="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { name=<span class="hljs-string">"child"</span>, <span class="hljs-attr">props</span>:[<span class="hljs-string">'message'</span>], <span class="hljs-comment">//利用props函数,定义一个“message”变量</span> data(){ } } &lt;script/&gt;</span></code></pre> </blockquote> <p>父组件部分:</p> <blockquote> <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><br /> <v-child message=&quot;msg&quot;><v-child></v-child> <!--在这里传值--><br /> </template><br /> <script> import Child form './child.vue' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name=&quot;parent&quot;, components:{ 'v-child':Child } data(){ return{ msg:'hello world' } } } <script></script>" 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">v-child</span> <span class="hljs-attr">message</span>=<span class="hljs-string">"msg"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">v-child</span>/&gt;</span> <span class="hljs-comment">&lt;!--在这里传值--&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="javascript"> <span class="hljs-keyword">import</span> Child form <span class="hljs-string">'./child.vue'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { name=<span class="hljs-string">"parent"</span>, <span class="hljs-attr">components</span>:{ <span class="hljs-string">'v-child'</span>:Child } data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">msg</span>:<span class="hljs-string">'hello world'</span> } } } &lt;script/&gt;</span></code></pre> </blockquote> <p><strong>2.子组件给父组件传值($emit)</strong> 子组件给父组件传值的中心思想是;通过方法传参,具体用法如下:</p> <p>子组件部分</p> <blockquote> <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=" <script> data(){ return{ msg:'123' } }, methods:{ funcName:function(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit(&quot;tanslate&quot;,<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg) /*自定一个事件名tanslate和一个参数<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.msg */ } } <script></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> data(){ <span class="hljs-keyword">return</span>{ msg:<span class="hljs-string">'123'</span> } }, methods:{ funcName:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"tanslate"</span>,<span class="hljs-keyword">this</span>.msg) <span class="hljs-comment">/*自定一个事件名tanslate和一个参数this.msg */</span> } } &lt;script/&gt;</span></code></pre> </blockquote> <p>父页面<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>部分:通过子页面定义的tanslate事件调用自定的tanslateText方法</p> <blockquote> <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="<v-child v-on:tanslate=&quot;tanslateText&quot;></v-child>" 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">v-child</span> <span class="hljs-attr">v-on:tanslate</span>=<span class="hljs-string">"tanslateText"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">v-child</span>&gt;</span></code></pre> </blockquote> <p>父页面js部分:</p> <blockquote> <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=" methods:{ tanslateText:function(item){ //参数text是子页面传过来的参数 console.log(item) //打印出子页面传过来的参数 } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> <span class="hljs-selector-tag">methods</span>:{ <span class="hljs-attribute">tanslateText</span>:<span class="hljs-built_in">function</span>(item){ //参数text是子页面传过来的参数 console.<span class="hljs-built_in">log</span>(item) //打印出子页面传过来的参数 } }</code></pre> </blockquote> <p><strong>3.兄弟组件之间传值</strong> </p> <p>不借助vuex的话,兄弟组件之间通信时没什么办法的,但是我们可以利用现有的知识来实现兄弟组件通信,中心思想是“先子传父,在父传子”,具体代码与上面的方法相同,好了!以上就是不借助vuex组件之间的通信方式</p> <p></code></p>

总结

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

说一说Vue(2.0)组件的通信方式

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

说一说Vue(2.0)组件的通信方式

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

80%的人都看过