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

vue2 基础学习08(给组件绑定原生事件)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <ul> <li> <h4>在组件上设置点击事件</h4> <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 id=&quot;app&quot; > <child @click=&quot;handleClick&quot;></child> </div> <p> <script></p> <p> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component('child',{ template:`</p> <div>Child</div> <p>` }), new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:'#app', methods:{ handleClick(){ alert('click') } } })</p> <p> </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <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">child</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"handleClick"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</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">script</span>&gt;</span><span class="javascript"> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.component(<span class="hljs-string">'child'</span>,{ <span class="hljs-attr">template</span>:<span class="hljs-string">`&lt;div&gt;Child&lt;/div&gt;`</span> }), <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>:<span class="hljs-string">'#app'</span>, <span class="hljs-attr">methods</span>:{ handleClick(){ alert(<span class="hljs-string">'click'</span>) } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>显然在Root组件中不能被触发,因为这时候 组件<code>child</code>上的<code>click</code>相当于自定义的一个事件,这时候需要通过<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit</code>去触发自定义事件</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 id=&quot;app&quot; > <child @click=&quot;handleClick&quot;></child> </div> <p> <script></p> <p> Vue.component('child',{ template:`</p> <div @click=&quot;handleClick&quot;>Child</div> <p>`, methods:{ handleClick(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('click') } } }), new Vue({ el:'#app', methods:{ handleClick(){ alert('click') } } })</p> <p> </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">child</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"handleClick"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</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">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'child'</span>,{ template:`&lt;div @click=<span class="hljs-string">"handleClick"</span>&gt;Child&lt;/div&gt;`, methods:{ handleClick(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$emit(<span class="hljs-string">'click'</span>) } } }), <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">'#app'</span>, methods:{ handleClick(){ alert(<span class="hljs-string">'click'</span>) } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <blockquote><p>这时候就实现了点击事件,但是究其根本,这还是自定义事件,太过麻烦。</p></blockquote> </li> <li> <h4>给组件绑定原生事件</h4> <blockquote><p>非常简单:只要在事件绑定后面加上<code>.native</code> 的修饰符就可以了</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=" <div id=&quot;app&quot; > <child @click.native=&quot;handleClick&quot;></child> </div> <p> <script> Vue.component('child',{ template:`</p> <div >Child</div> <p>`, }), new Vue({ el:'#app', methods:{ handleClick(){ alert('click') } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">child</span> @<span class="hljs-attr">click.native</span>=<span class="hljs-string">"handleClick"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</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">script</span>&gt;</span><span class="javascript"> Vue.component(<span class="hljs-string">'child'</span>,{ <span class="hljs-attr">template</span>:<span class="hljs-string">`&lt;div &gt;Child&lt;/div&gt;`</span>, }), <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>:<span class="hljs-string">'#app'</span>, <span class="hljs-attr">methods</span>:{ handleClick(){ alert(<span class="hljs-string">'click'</span>) } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> </li> </ul> <p></code></p>

总结

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

vue2 基础学习08(给组件绑定原生事件)

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

vue2 基础学习08(给组件绑定原生事件)

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

80%的人都看过