<h2 id="articleHeader0">1.$refs的使用场景</h2> <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="父组件: <div id=&quot;app&quot;> <child-a ref=&quot;child&quot;></child-a><br /> <button @click=&quot;getMyEvent&quot;>点击父组件</button></p> <div> <p><script> import ChildA from './child.vue'</p> <p> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ components:{ ChildA }, data(){ return { msg:'我是父组件的数据' } }, methods:{ getMyEvent(){ //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$refs.child.emitEvent(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.msg) } } } </script></p> <p>子组件:<br /> <template><br /> <button>点击我</button><br /> </template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ methods:{ emitEvent(msg){ console.log('接收的数据------'+msg) } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>父组件: <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-a</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"child"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"getMyEvent"</span>&gt;</span>点击父组件<span class="hljs-tag">&lt;/<span class="hljs-name">button</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"> <span class="hljs-keyword">import</span> ChildA <span class="hljs-keyword">from</span> <span class="hljs-string">'./child.vue'</span> <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>{ <span class="hljs-attr">components</span>:{ ChildA }, data(){ <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>:<span class="hljs-string">'我是父组件的数据'</span> } }, <span class="hljs-attr">methods</span>:{ getMyEvent(){ <span class="hljs-comment">//调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$refs.child.emitEvent(<span class="hljs-keyword">this</span>.msg) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">button</span>&gt;</span>点击我<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">methods</span>:{ emitEvent(msg){ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'接收的数据------'</span>+msg) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader1">$emit的使用</h2> <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><br /> <button @click=&quot;emitEvent&quot;>点击我</button><br /> </template><br /> <script> export default{ data(){ return{ msg:'我是子组件的数据' } }, methods:{ emitEvent(){ //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。 this.$emit('my-event',this.msg) } } } </script><br /> 父组件:<br /> <template> </p> <div id=&quot;app&quot;> <child-a @my-event=&quot;getMyEvent&quot;></child-a><br /> //父组件通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值。 </div> <p></template><br /> <script> import childA from './child.vue'; export default { components:{ childA }, methods:{ getMyEvent(msg){ console.log('接收数据---'+msg); //接收数据,我是子组件的数据 } } } </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">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"emitEvent"</span>&gt;</span>点击我<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">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> } }, <span class="hljs-attr">methods</span>:{ emitEvent(){ <span class="hljs-comment">//通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。</span> <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'my-event'</span>,<span class="hljs-keyword">this</span>.msg) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">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-a</span> @<span class="hljs-attr">my-event</span>=<span class="hljs-string">"getMyEvent"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-a</span>&gt;</span> //父组件通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值。 <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">import</span> childA <span class="hljs-keyword">from</span> <span class="hljs-string">'./child.vue'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">components</span>:{ childA }, <span class="hljs-attr">methods</span>:{ getMyEvent(msg){ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'接收数据---'</span>+msg); <span class="hljs-comment">//接收数据,我是子组件的数据</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader2">3.$on的使用场景</h2> <p>兄弟组件之间相互传递数据。<br />首先创建一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的空白实例(兄弟组件的桥梁)</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="import Vue from 'vue'; export default new Vue();" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Vue();</code></pre> <p>子组件A:发送放使用$emit自定义事件把数据带过去。</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> <span>A组件-{{msg}}</span><br /> <input type=&quot;button&quot; value=&quot;把A组件数据传递给B&quot; @click=&quot;send&quot;> </div> <p></template><br /> <script> import eventBus from './eventBus'; export default{ data(){ return{ msg:{ a:'111', b:'222' } } }, methods:{ send(){ eventBus.$emit('aevent',this.msg) } } } </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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>A组件-{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"把A组件数据传递给B"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"send"</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>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> eventBus <span class="hljs-keyword">from</span> <span class="hljs-string">'./eventBus'</span>; <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-attr">a</span>:<span class="hljs-string">'111'</span>, <span class="hljs-attr">b</span>:<span class="hljs-string">'222'</span> } } }, <span class="hljs-attr">methods</span>:{ send(){ eventBus.$emit(<span class="hljs-string">'aevent'</span>,<span class="hljs-keyword">this</span>.msg) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>子组件B:接收方通过$on监听自定义事件的callback接收数据</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> <span>B组件,A传的数据为--{{msg}}</span> </div> <p></template><br /> <script> import eventBus from './eventBus.vue' export default { data(){ return{ msg:'' } }, mounted(){ eventBus.$on('aevent',(val)=>{//监听事件aevent,回调函数要使用<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>。 console.log(val);//打印结果;我是a组件的数据。 }) } } </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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>B组件,A传的数据为--{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</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>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> eventBus <span class="hljs-keyword">from</span> <span class="hljs-string">'./eventBus.vue'</span> <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> } }, mounted(){ eventBus.$on(<span class="hljs-string">'aevent'</span>,(val)=&gt;{<span class="hljs-comment">//监听事件aevent,回调函数要使用<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-built_in">console</span>.log(val);<span class="hljs-comment">//打印结果;我是a组件的数据。</span> }) } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <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> <childa></childa><br /> <br /> <childb></childb> </div> <p></template><br /> <script> import childa from './childa.vue'; import childb from './childb.vue'; export default{ componets:{ childa, childb }, data(){ return{ msg:'' } } } </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">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">childa</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">childa</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">childb</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">childb</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>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> childa <span class="hljs-keyword">from</span> <span class="hljs-string">'./childa.vue'</span>; <span class="hljs-keyword">import</span> childb <span class="hljs-keyword">from</span> <span class="hljs-string">'./childb.vue'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">componets</span>:{ childa, childb }, data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">msg</span>:<span class="hljs-string">''</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16523.html