<p><code></p> <h4>序言</h4> <p>最近开始写一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的项目,直接从零开始(2333),博主表示亚历山大,为了保证学习<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的效率,在此记录从0开始学习<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>所踩的坑。</p> <p>这里就不一一介绍Vue的特性了,直接从编码开始。</p> <h5>组件间的通信</h5> <ol> <li> <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=" <comp-form :faToSon = &quot;toSon&quot; // 传递给子组件的值 @closeForm = 'handleClose' // 传递给子组件的方法 > </comp-form><br /> ... 此处省略部分代码 ...<br /> export default{<br /> data() {<br /> return {<br /> toSon: {}<br /> }<br /> },<br /> methods: {<br /> handleClose(param) {<br /> // do something<br /> },<br /> }<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> &lt;comp-form :faToSon = <span class="hljs-string">"toSon"</span> <span class="hljs-comment">// 传递给子组件的值</span> <span class="hljs-meta">@closeForm</span> = <span class="hljs-string">'handleClose'</span> <span class="hljs-comment">// 传递给子组件的方法</span> &gt; &lt;/comp-form&gt; ... 此处省略部分代码 ... <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> <span class="hljs-keyword">default</span>{ <span class="hljs-keyword">data</span>() { <span class="hljs-keyword">return</span> { toSon: {} } }, methods: { handleClose(param) { <span class="hljs-comment">// do something</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=" export default{ data() { return { getData: this.faToSon // 获取父组件传递过来的值 } }, ... ... props: ['faToSon'], ... ... methods: { useFathersFunction() { this.$emit('closeForm',param) // 调用父组件传递过来的方法 } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> export <span class="hljs-keyword">default</span>{ <span class="hljs-keyword">data</span>() { <span class="hljs-keyword">return</span> { getData: <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.faToSon <span class="hljs-comment">// 获取父组件传递过来的值</span> } }, ... ... props: [<span class="hljs-string">'faToSon'</span>], ... ... methods: { useFathersFunction() { <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'closeForm'</span>,param) <span class="hljs-comment">// 调用父组件传递过来的方法</span> } } }</code></pre> </li> <li> <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="<comp-form ref= &quot;sonComp&quot;> </comp-form></p> <p><script> import SonCom from '......' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ ... ... components: { SonCom, } methods: { useSonsFunction() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$refs.sonComp.sonsFunction(param); // 调用子组件的方法 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$refs.sonComp.son; // 获取子组件data里面的值 //(子组件还可以通过向父组件传值,让父组件得到子组件的值) }, } } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">comp-form</span> <span class="hljs-attr">ref</span>= <span class="hljs-string">"sonComp"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">comp-form</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> SonCom <span class="hljs-keyword">from</span> <span class="hljs-string">'......'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{ ... ... components: { SonCom, } methods: { useSonsFunction() { <span class="hljs-keyword">this</span>.$refs.sonComp.sonsFunction(param); <span class="hljs-comment">// 调用子组件的方法</span> <span class="hljs-keyword">this</span>.$refs.sonComp.son; <span class="hljs-comment">// 获取子组件data里面的值</span> <span class="hljs-comment">//(子组件还可以通过向父组件传值,让父组件得到子组件的值)</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="export default{ data() { return { son: {} } } ... ... methods: { sonsFunction(param) { // do somthing } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code><span class="hljs-title">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-class"><span class="hljs-keyword">data</span>() { <span class="hljs-title">return</span> { <span class="hljs-title">son</span>: {}</span> } } ... ... methods: { sonsFunction(param) { // <span class="hljs-keyword">do</span> somthing } } }</code></pre> </li> </ol> <h5>子组件的data与父组件传递过来的props保持同步(伪<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>)</h5> <p>废话不多说,直接贴代码。 <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=" export default{ data() { return { getData: this.faToSon // 获取父组件传递过来的值 } }, ... ... watch: { // ..........监听父组件props的变化 faToSon: { handler(newval, oldval) { // do something }, // ..........由于监听的方式是通过比较内存地址是否变化, // ..........而对象内部属性的改变并不会引起对象内存地址的改变 // ..........因而设置deep:true进行深度观察 deep: true } }, props: ['faToSon'], ... ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> export <span class="hljs-keyword">default</span>{ <span class="hljs-keyword">data</span>() { <span class="hljs-keyword">return</span> { getData: <span class="hljs-keyword">this</span>.faToSon <span class="hljs-comment">// 获取父组件传递过来的值</span> } }, ... ... watch: { <span class="hljs-comment">// ..........监听父组件props的变化</span> faToSon: { handler(newval, oldval) { <span class="hljs-comment">// do something</span> }, <span class="hljs-comment">// ..........由于监听的方式是通过比较内存地址是否变化,</span> <span class="hljs-comment">// ..........而对象内部属性的改变并不会引起对象内存地址的改变</span> <span class="hljs-comment">// ..........因而设置deep:true进行深度观察</span> deep: <span class="hljs-literal">true</span> } }, props: [<span class="hljs-string">'faToSon'</span>], ... ... }</code></pre> <p>目前才刚开始学习Vue三天左右,以上问题都是经过百度并实践成功了的,纯手打.......</p> <p></code></p>

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