<p><code></p> <h3 id="articleHeader0">父组件 -&gt; 子组件</h3> <p>通过props来进行通信 <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="<Children :dataName = &quot;dataContent&quot; ></span><br /> //dataName: 传过去数据的名字<br /> //dataContent: 传过去的数据" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>&lt;Children :dataName = <span class="hljs-string">"dataContent"</span> /&gt; <span class="hljs-comment">//dataName: 传过去数据的名字</span> <span class="hljs-comment">//dataContent: 传过去的数据</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="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { props:['dataName '] } console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.dataName)//通过 &quot;<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.父组件传过数据名&quot; 来调用 </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</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> { <span class="hljs-attr">props</span>:[<span class="hljs-string">'dataName '</span>] } <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.dataName)<span class="hljs-comment">//通过 "this.父组件传过数据名" 来调用</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader1">子组件 -&gt; 父组件</h3> <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="this.$emit('dataName1',dataContnet1) //通过this.$emit()来发送你想要发送的数据 //dataName1: 传过去数据的名字 //dataContent1: 传过去的数据" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'dataName1'</span>,dataContnet1) <span class="hljs-comment">//通过this.$emit()来发送你想要发送的数据</span> <span class="hljs-comment">//dataName1: 传过去数据的名字</span> <span class="hljs-comment">//dataContent1: 传过去的数据</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="<Children @dataName1 = 'newFuncName' ></span><br /> //dataName1: 传过去数据的名字<br /> //newFuncName: 接收的方法名</p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { methods: { newFuncName: function (data) { console.log(data) //data 就是你想要传的数据 } } }</p> <p></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">Children</span> @<span class="hljs-attr">dataName1</span> = <span class="hljs-string">'newFuncName'</span> /&gt;</span> //dataName1: 传过去数据的名字 //newFuncName: 接收的方法名 <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>: { <span class="hljs-attr">newFuncName</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{ <span class="hljs-built_in">console</span>.log(data) <span class="hljs-comment">//data 就是你想要传的数据</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

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