<p><code></p> <p>如何把子组件内特定的数据传给父组件?</p> <p>例如<br />把子组件的名字传给父组件并在父组件上显示</p> <p>思路<br />在子组件被点击后 <code>emit</code> 一个事件名和组件的名字<br />在父组件上监听子组件 <code>emit</code> 出的事件,并触发处理函数<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="<!DOCTYPE html><br /> <html lang=&quot;en&quot; dir=&quot;ltr&quot;><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <title></title><br /> <script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js&quot;></script><br /> </head><br /> <body></p> <div id=&quot;app&quot;> child name: {{child}}<br /> <child v-on:say='greeting(&quot;child&quot;, $event)'></child> </div> <p> </body><br /> <script> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component('child', { template: `</p> <div> child <button v-on:click='$emit(&quot;say&quot;, &quot;Jack&quot;)'>greeting</button> </div> <p> ` }) new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { child: '', }, methods: { greeting: function (key, value) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>[key] = value }, } }) </script><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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> <span class="hljs-attr">dir</span>=<span class="hljs-string">"ltr"</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://cdn.jsdelivr.net/npm/vue@2.6.7/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> child name: {{child}} <span class="hljs-tag">&lt;<span class="hljs-name">child</span> <span class="hljs-attr">v-on:say</span>=<span class="hljs-string">'greeting("child", $event)'</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">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <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>, { template: ` &lt;div&gt; child &lt;button v-on:click=<span class="hljs-string">'$emit("say", "Jack")'</span>&gt;greeting&lt;/button&gt; &lt;/div&gt; ` }) <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { child: <span class="hljs-string">''</span>, }, methods: { greeting: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(key, value)</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>[key] = value }, } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p></code></p>

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