脚本宝典收集整理的这篇文章主要介绍了

简单说说vue的父子组件,父子组件传值和vuex

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><strong>一、vue的父子组件之间是如何传值的?</strong><br /> 首先呢,需要说说的是,vue既然有<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>都是<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>的话,那么就容易混乱了,比如a,b页面绑了一个num=10,那b,c页面又绑了num=5,那vue实例的num到底听谁的?所以,这就是vue官网为什么说<br /><strong>组件之间的数据只能是单项流通的,而且由父组件传递给子组件</strong><br />好,接下来就话不多说了,父子组件是如何传值的,而且谁是父谁是子呢?<br />例子1:先写一个组件放在component文件夹下叫son.vue好了(有点剧透的命名...)</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> <button class=&quot;test-btn&quot; @click=&quot;add&quot;>+</button><br /> <button class=&quot;test-btn&quot; @click=&quot;minu&quot;>-</button></p> <p class=&quot;text-link&quot;>这里是son的num:{{num}}</p> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { //props:[&quot;num&quot;],//接收父组件传递过来的值,这里我先写上 data () { return { num:0 } }, methods:{ add(){//<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>的语法相当于add:function(){} <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.num++; }, minu(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.num--; } } } </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"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"test-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"test-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"minu"</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">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-link"</span>&gt;</span>这里是son的num:{{num}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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"><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-comment">//props:["num"],//接收父组件传递过来的值,这里我先写上</span> data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">num</span>:<span class="hljs-number">0</span> } }, <span class="hljs-attr">methods</span>:{ add(){<span class="hljs-comment">//<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>的语法相当于add:function(){}</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.num++; }, minu(){ <span class="hljs-keyword">this</span>.num--; } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>这个son.vue的组件相信大家都看得懂,加减num的组件。接下来写一个index.vue调用son.vue</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="//index.vue <template></p> <div> <son v-bind:num=&quot;num&quot;></son>//传递一个值给son.vue,这时候可以把son.vue的props那个注释注销掉了</p> <p class=&quot;text-link&quot;>这里是index的num:{{num}}</p> </p></div> <p></template><br /> <script> import son from './../components/son' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { num:10 } }, components:{ son } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>//index.vue <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">son</span> <span class="hljs-attr">v-bind:num</span>=<span class="hljs-string">"num"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">son</span>&gt;</span>//传递一个值给son.vue,这时候可以把son.vue的props那个注释注销掉了 <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-link"</span>&gt;</span>这里是index的num:{{num}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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> son <span class="hljs-keyword">from</span> <span class="hljs-string">'./../components/son'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">num</span>:<span class="hljs-number">10</span> } }, <span class="hljs-attr">components</span>:{ son } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>这时候两个num都是10。再次点击加减按钮,我们会发现,‘son的num’一直有变化,而‘index的num’一直是10,这就是数据的单项流通。那么我们如何点击按钮然后改变‘index的num’呢?这时候,需要$emit干活了。</p> <p>我们需要在index.vue里改动一下代码<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="<son v-bind:num=&quot;num&quot; v-on:add=&quot;icr&quot; v-on:minu=&quot;der&quot;></son>//v-on:add=&quot;icr&quot;就是绑定一个自定义事件<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code>&lt;son v-bind:num=<span class="hljs-string">"num"</span> v-<span class="hljs-keyword">on</span>:<span class="hljs-keyword">add</span>=<span class="hljs-string">"icr"</span> v-<span class="hljs-keyword">on</span>:minu=<span class="hljs-string">"der"</span>&gt;&lt;/son&gt;<span class="hljs-comment">//v-on:add="icr"就是绑定一个自定义事件</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="methods:{ icr(){ this.num++; }, der(){ this.num--; } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>methods:{ icr(){ <span class="hljs-keyword">this</span>.num++; }, der(){ <span class="hljs-keyword">this</span>.num--; } } </code></pre> <p>然后在son.vue中methods变成</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="methods:{ add(){ this.$emit(&quot;add&quot;);//$emit(&quot;add&quot;)就是触发父组件中的add方法 }, minu(){ this.$emit(&quot;minu&quot;); } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>methods:{ add(){ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"add"</span>);<span class="hljs-comment">//$emit("add")就是触发父组件中的add方法</span> }, minu(){ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"minu"</span>); } }</code></pre> <p>所以,<strong>$emit("xxx")触发了父组件的函数,改变了父组件的data的num值,父组件再通过props传值给子组件。从而实现数据传递,父子组件通信</strong>。<br />这是son.vue和index.vue的完整代码</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="//son.vue <template></p> <div> <button class=&quot;test-btn&quot; @click=&quot;add&quot;>+</button><br /> <button class=&quot;test-btn&quot; @click=&quot;minu&quot;>-</button></p> <p class=&quot;text-link&quot;>这里是{{num}}</p> </div> <p></template><br /> <script> export default { props:[&quot;num&quot;], data () { return { num:10 } }, methods:{ add(){ this.$emit(&quot;add&quot;); }, minu(){ this.$emit(&quot;minu&quot;); } } } </script></p> <p>//index.vue<br /> <template></p> <div> <son v-bind:num=&quot;num&quot; v-on:add=&quot;icr&quot; v-on:minu=&quot;der&quot;></son></p> <p class=&quot;text-link&quot;>父{{num}}</p> </div> <p></template><br /> <script> import son from './../components/son' export default { data () { return { num:10 } }, components:{ son }, methods:{ icr(){ this.num++; }, der(){ this.num--; } } } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>//son.vue <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">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"test-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"test-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"minu"</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">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-link"</span>&gt;</span>这里是{{num}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">props</span>:[<span class="hljs-string">"num"</span>], data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">num</span>:<span class="hljs-number">10</span> } }, <span class="hljs-attr">methods</span>:{ add(){ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"add"</span>); }, minu(){ <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"minu"</span>); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> //index.vue <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">son</span> <span class="hljs-attr">v-bind:num</span>=<span class="hljs-string">"num"</span> <span class="hljs-attr">v-on:add</span>=<span class="hljs-string">"icr"</span> <span class="hljs-attr">v-on:minu</span>=<span class="hljs-string">"der"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">son</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-link"</span>&gt;</span>父{{num}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</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> son <span class="hljs-keyword">from</span> <span class="hljs-string">'./../components/son'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">num</span>:<span class="hljs-number">10</span> } }, <span class="hljs-attr">components</span>:{ son }, <span class="hljs-attr">methods</span>:{ icr(){ <span class="hljs-keyword">this</span>.num++; }, der(){ <span class="hljs-keyword">this</span>.num--; } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p><strong>二、说说vuex以及他的state、actions、getters、mutations、modules、store</strong><br />首先,vuex官网上说是一个vue的状态管理工具。可能状态比较难理解,大家可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候,就把其中的变量抽离出来管理。刚好大家可以看看上面,父子组件之间的num之间的通信是不是比较麻烦,改变数据还要用$emit。如果有一个地方跟仓库一样就存放着num的值,谁要用谁去请求num的值,谁想改就改该多好是吧,vuex就是干这个的,有点全局变量的意思。任何组件需要拿,改东西,都可以找他。</p> <p>1、首先state是惟一的数据载体,跟仓库一样。<br />2、而mutations是唯一可以改变state的值的东东,使用commit等。<br />这两个是vuex最最基础缺一不可的。简单的vuex管理就使用这两个就行,如何使用vuex?看这里<a href="https://segmentfault.com/a/1190000015392842?_ea=3918042">https://segmentfault.com/a/11...</a><br />3、getters的官方说明:派生出新的状态,这个比较难理解。简单来说,就是<strong>过滤,组合!</strong><br />比如说state里面存了一个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>,<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>有好多个数据,而我只想要用status:0的那些个,就可以用getters。是不是有点过滤的意思。所以getters有时候还很好用,很必要!。<br />4、actions是用来提交mutations,为什么不用actions直接修改state值呢?其实大多数的管理工具都是这样做的,比如redux,mobx。actions定义修改的动作并且进行数据请求,通过commit再去触发对应的mutations。是很重要的一个属性,也符合解耦的思想。<br />5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations;modulesB也可以有一个完整的state、actions、getters、mutations,他就是将store分割成模块,避免混淆。</p> <p>好了,今天就说这一些,还是需要自己多看官网文档,多实践。跪求各位大牛指导!学习真难,求带带我...</p> <p>最后还是说一下,如果文章对你有帮助的话,请给我一个star鼓励一下,我还没工作呢。。。呜呜呜</p>

总结

以上是脚本宝典为你收集整理的

简单说说vue的父子组件,父子组件传值和vuex

全部内容,希望文章能够帮你解决

简单说说vue的父子组件,父子组件传值和vuex

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过