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

vue非父子组件怎么进行通信

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote> <p>本文只在个人博客和 SegmentFault 社区个人专栏发表,转载请注明出处 <br />个人博客: <a href="https://zengxiaotao.github.io" rel="nofollow noreferrer" target="_blank">https://zengxiaotao.github.io</a> <br />SegmentFault 个人专栏: <a href="https://segmentfault.com/blog/zengxiaotao">https://segmentfault.com/blog...</a></p> </blockquote> <h3 id="articleHeader0">写在前面</h3> <p>组件是 vue 的核心部分,而组件之间通信方式是必不可少的。 父子之间的通信方式很简单,父组件通过 props 向子组件传值,而子组件通过自定义事件把数据传递回父组件,那么非父子关系组件怎么进行通信? <br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>2.x 废弃了 broadcast 和 dispatch 之后,可以通过 vuex ,还有 event bus 来解决。这里不讲 vuex ,讲起来是另外一个话题,就讲一下怎么在非父子组件之间通过 event bus 进行通信。</p> <h3 id="articleHeader1">demo</h3> <p>首先我们要实现的效果是</p> <p><span class="img-wrap"><img data-src="/img/bVHUkt?w=231&amp;h=180" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>上下分别是 foo组件和 bar 组件,它们之间是非父子关系,分别点击各自的 button ,另一个组件的 count 对应增加。</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="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>非父子组件通信</title><br /> <script src=&quot;https://unpkg.com/vue@2.1.8/dist/vue.js&quot;></script><br /> </head><br /> <body></p> <div id='app'> <foo></foo></p> <hr> <bar></bar> </div> <p></body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>非父子组件通信<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue@2.1.8/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</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> <span class="hljs-attr">id</span>=<span class="hljs-string">'app'</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">bar</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">bar</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">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>以上就是这个 demo 结构。看看 js 的实现</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="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 实例,作为 ‘中转站’<br /> var eventBus = new <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({})<br /> // foo 组件<br /> var foo = {<br /> template: '</p> <div> <p>the count of foo is {{fooCount}}</p> <p>' +<br /> '<button @click=&quot;addBar&quot;>add bar's count</button></div> <p>',<br /> data: function() {<br /> return {<br /> fooCount: 0<br /> }<br /> },<br /> methods: {<br /> addBar: function() {<br /> // 触发事件<br /> eventBus.$emit('addBar')<br /> }<br /> },<br /> mounted: function() {<br /> eventBus.$on('addFoo', function(num) {<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.fooCount +=num<br /> }.bind(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>))<br /> // 这里必须将 <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> 绑定在组件实例上。如果不使用 bind , 也可以使用<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>。<br /> }<br /> }<br /> // bar 组件<br /> var bar = {<br /> template: '</p> <div> <p>the count of bar is {{barCount}}</p> <p>' +<br /> '<button @click=&quot;addFoo&quot;>add foo's count</button></div> <p>',<br /> data: function() {<br /> return {<br /> barCount: 0<br /> }<br /> },<br /> methods: {<br /> addFoo: function() {<br /> // 触发事件,同时传递一个参数<br /> eventBus.$emit('addFoo', 2)<br /> }<br /> },<br /> // 在 组件创建的钩子函数中 监听事件<br /> mounted: function() {<br /> eventBus.$on('addBar', function() {<br /> this.barCount++<br /> }.bind(this))<br /> }<br /> }<br /> var vm = new Vue({<br /> el: '#app',<br /> components: {<br /> foo,<br /> bar<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 注册一个空的 Vue 实例,作为 ‘中转站’</span> <span class="hljs-keyword">var</span> eventBus = <span class="hljs-keyword">new</span> Vue({}) <span class="hljs-comment">// foo 组件</span> <span class="hljs-keyword">var</span> foo = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;&lt;p&gt;the count of foo is {{fooCount}}&lt;/p&gt;'</span> + <span class="hljs-string">'&lt;button @click="addBar"&gt;add bar's count&lt;/button&gt;&lt;/div&gt;'</span>, <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">fooCount</span>: <span class="hljs-number">0</span> } }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">addBar</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 触发事件</span> eventBus.$emit(<span class="hljs-string">'addBar'</span>) } }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ eventBus.$on(<span class="hljs-string">'addFoo'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">num</span>) </span>{ <span class="hljs-keyword">this</span>.fooCount +=num }.bind(<span class="hljs-keyword">this</span>)) <span class="hljs-comment">// 这里必须将 this 绑定在组件实例上。如果不使用 bind , 也可以使用<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="浏览关于“箭头函数”的文章" target="_blank" class="tag_link">箭头函数</a>。</span> } } <span class="hljs-comment">// bar 组件</span> <span class="hljs-keyword">var</span> bar = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;&lt;p&gt;the count of bar is {{barCount}}&lt;/p&gt;'</span> + <span class="hljs-string">'&lt;button @click="addFoo"&gt;add foo's count&lt;/button&gt;&lt;/div&gt;'</span>, <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">barCount</span>: <span class="hljs-number">0</span> } }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">addFoo</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 触发事件,同时传递一个参数</span> eventBus.$emit(<span class="hljs-string">'addFoo'</span>, <span class="hljs-number">2</span>) } }, <span class="hljs-comment">// 在 组件创建的钩子函数中 监听事件</span> mounted: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ eventBus.$on(<span class="hljs-string">'addBar'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.barCount++ }.bind(<span class="hljs-keyword">this</span>)) } } <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">components</span>: { foo, bar } })</code></pre> <p>以上就实现了一个简易的 非父子组件之间的通信方式。通过 event bus ,在一个组件创建时的钩子函数中监听 某个事件,而在需要与其进行通信的组件中触发这个函数,同时交换数据。 </p> <p>当然,event bus 只适于某些不复杂的场景,在需要频繁进行组件通信的情况下,还是应该尽量使用 Vuex ,不仅使用上更加简单,同时数据流的流向也会相对清晰。</p> <blockquote> <p>全文完</p> </blockquote> <p></code></p>

总结

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

vue非父子组件怎么进行通信

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

vue非父子组件怎么进行通信

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

80%的人都看过