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

2.Vue子组件给父组件通信

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">子组件给父组件通信</h2> <p>如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的</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 @click='upData'></div> <p></template></p> <p><script type=&quot;text/javascript&quot;> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { msg: 'Hello' } } methods: { upData () { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('childData', <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg) //<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.msg传递的数据 } } } </script></p> <style type=&quot;text/css&quot;> </style> <p>" 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> @<span class="hljs-attr">click</span>=<span class="hljs-string">'upData'</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> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</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> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">'Hello'</span> } } methods: { upData () { <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'childData'</span>, <span class="hljs-keyword">this</span>.msg) <span class="hljs-comment">//this.msg传递的数据</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>通过绑定事件upData,在里面使用$emit事件来注册childData事件,并且传递数值this.msg到父组件中 <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><br /> <child @upData='changData' :msg='msg'></child> //监听子组件触发的事件,然后调用change方法<br /> </template></p> <p><script type=&quot;text/javascript&quot;> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { msg: '' } } methods: { changData (msg) { this.msg = msg } } } </script></p> <style type=&quot;text/css&quot;> </style> <p>" 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">child</span> @<span class="hljs-attr">upData</span>=<span class="hljs-string">'changData'</span> <span class="hljs-attr">:msg</span>=<span class="hljs-string">'msg'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</span>&gt;</span> //监听子组件触发的事件,然后调用change方法 <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">''</span> } } methods: { changData (msg) { <span class="hljs-keyword">this</span>.msg = msg } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>父组件通过监听子组件的childData的事件,来触发自己的绑定的changData事件,并将值获取复制给自己的msg<br />到这里就完成了子组件给父组件传递数据的过程</p> <p></code></p>

总结

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

2.Vue子组件给父组件通信

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

2.Vue子组件给父组件通信

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

80%的人都看过