<p><code></p> <p>首先来看看最后一种通信方式,假如我们有一个输入框,让用户填写优惠码,填完之后在组件里面进行判断,然后返回结果给实例,基本实现如下。</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=" <div id=&quot;root&quot; class=&quot;container&quot;> <coupon></coupon> </div> <p><script type=&quot;text/javascript&quot;></p> <p> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component('coupon', { template:` <input type=&quot;text&quot; /> ` });</p> <p> var vm = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({</p> <p> el:&quot;#root&quot;</p> <p> });</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id=<span class="hljs-string">"root"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"container"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">coupon</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">coupon</span>&gt;</span></span> &lt;<span class="hljs-regexp">/div&gt; &lt;script type="text/</span>javascript<span class="hljs-string">"&gt; <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.component('coupon', { template:` &lt;input type="</span>text<span class="hljs-string">" /&gt; ` }); var vm = new Vue({ el:"</span>#root<span class="hljs-string">" }); &lt;/script&gt;</span></code></pre> <p>用户输完优惠码之后,触发 <code>blur</code> 事件,绑定到 <code>onCouponApplied</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="Vue.component('coupon', { template:` <input type=&quot;text&quot; @blur=&quot;onCouponApplied&quot; ></span><br /> `,<br /> methods: {<br /> onCouponApplied() {<br /> // 应用该优惠码,省略<br /> // 触发事件<br /> this.$emit('applied');<br /> }<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">Vue.component(<span class="hljs-string">'coupon'</span>, { <span class="hljs-attr">template</span>:<span class="hljs-string">` &lt;input type="text" @blur="onCouponApplied" /&gt; `</span>, <span class="hljs-attr">methods</span>: { onCouponApplied() { <span class="hljs-comment">// 应用该优惠码,省略</span> <span class="hljs-comment">// 触发事件</span> <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">'applied'</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=" <div id=&quot;root&quot; class=&quot;container&quot;> <coupon @applied=&quot;onCouponApplied&quot;></coupon></p> <h1 v-if=&quot;couponApplied&quot;>该优惠码已应用!</h1> </div> <p><script type=&quot;text/javascript&quot;></p> <p> var vm = new Vue({</p> <p> el:&quot;#root&quot;, methods: { onCouponApplied(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.couponApplied = true; } }, data: { couponApplied:false }</p> <p> });</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div id=<span class="hljs-string">"root"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"container"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">coupon</span> @<span class="hljs-attr">applied</span>=<span class="hljs-string">"onCouponApplied"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">coupon</span>&gt;</span></span> &lt;h1 v-<span class="hljs-keyword">if</span>=<span class="hljs-string">"couponApplied"</span>&gt;该优惠码已应用!&lt;<span class="hljs-regexp">/h1&gt; &lt;/</span>div&gt; <span class="xml"><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="actionscript"> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#root"</span>, methods: { onCouponApplied(){ <span class="hljs-keyword">this</span>.couponApplied = <span class="hljs-literal">true</span>; } }, data: { couponApplied:<span class="hljs-literal">false</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>这种情形其实就是之前我们所说的组件的内部通信,组件传递数据给实例,使用 <code>$emit</code> 和 <code>v-on</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="window.Event = new Vue(); // 创建一个全局变量 Event,绑定到 Vue 实例 Vue.component('coupon', { template:` <input type=&quot;text&quot; @blur=&quot;onCouponApplied&quot; ></span><br /> `,<br /> methods: {<br /> onCouponApplied() {<br /> Event.$emit('applied'); // 实例触发 `applied` 事件<br /> }<br /> }<br /> });</p> <p>var vm = new Vue({</p> <p> el:&quot;#root&quot;,<br /> methods: {<br /> onCouponApplied(){<br /> this.couponApplied = true;<br /> }<br /> },<br /> data: {<br /> couponApplied:false<br /> },<br /> created(){<br /> Event.$on('applied',function(){ // 实例监听 `applied` 事件<br /> vm.couponApplied = true<br /> })<br /> }</p> <p>});" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">window</span>.Event = <span class="hljs-keyword">new</span> Vue(); <span class="hljs-comment">// 创建一个全局变量 Event,绑定到 Vue 实例</span> Vue.component(<span class="hljs-string">'coupon'</span>, { <span class="hljs-attr">template</span>:<span class="hljs-string">` &lt;input type="text" @blur="onCouponApplied" /&gt; `</span>, <span class="hljs-attr">methods</span>: { onCouponApplied() { Event.$emit(<span class="hljs-string">'applied'</span>); <span class="hljs-comment">// 实例触发 `applied` 事件</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">"#root"</span>, <span class="hljs-attr">methods</span>: { onCouponApplied(){ <span class="hljs-keyword">this</span>.couponApplied = <span class="hljs-literal">true</span>; } }, <span class="hljs-attr">data</span>: { <span class="hljs-attr">couponApplied</span>:<span class="hljs-literal">false</span> }, created(){ Event.$on(<span class="hljs-string">'applied'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// 实例监听 `applied` 事件</span> vm.couponApplied = <span class="hljs-literal">true</span> }) } });</code></pre> <p>可以看出,我们定义了一个全局的公共实例,用于作为事件触发和监听的桥梁。使用这种方法的话,不同组件之间也可以进行通信。</p> <p>最后,我们来总结下目前为止学到过的组件之间的通信方式吧:</p> <ul> <li> <p>组件的内部通信:</p> <ul> <li> <p>实例传数据给组件:<code>props</code></p> </li> <li> <p>组件反传数据给实例:<code>$emit</code> 以及 <code>v-on</code></p> </li> </ul> </li> <li> <p>在一个组件中使用另外一个组件:</p> <ul> <li> <p>父组件可使用 <code>$children</code> 来访问子组件</p> </li> <li> <p>子组件可以使用 <code>$parent</code> 来访问父组件</p> </li> </ul> </li> <li> <p>不同组件之间的通信:通过定义公共实例作为桥梁,使用 <code>$emit</code> 和 <code>$on</code> 触发和监听事件</p> </li> <li> <p>属性传递</p> <ul> <li> <p>静态的 - 传递字面量</p> </li> <li> <p>动态的 - 传递表达式</p> </li> </ul> </li> </ul> <p></code></p>

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