vue父子组件传值 简单了解vuex

vue父子组件传值 简单了解vuex一、vue的父子组件之间是如何传值的?首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话,那么就容易混乱了,比如a,b页面绑了一个num=10,那b,c页面又绑了num=5,那vue实例的num到底听谁的?所以,这就是vue官网为什么说组件之间的数据只能是单项流通的,而且由父组件传递给…

大家好,又见面了,我是你们的朋友全栈君。

一、vue的父子组件之间是如何传值的?

首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话,那么就容易混乱了,比如a,b页面绑了一个num=10,那b,c页面又绑了num=5,那vue实例的num到底听谁的?所以,这就是vue官网为什么说

组件之间的数据只能是单项流通的,而且由父组件传递给子组件

好,接下来就话不多说了,父子组件是如何传值的,而且谁是父谁是子呢?
例子1:先写一个组件放在component文件夹下叫son.vue好了(有点剧透的命名…)

<template>
  <div>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是son的num:{
  
  {num}}</p>
  </div>
</template>
<script> export default { 
     //props:["num"], //接收父组件传递过来的值,这里我先写上 data () { 
     return { 
     num:0 } }, methods:{ 
     add(){ 
     //es6的语法相当于add:function(){} this.num++; }, minu(){ 
     this.num--; } } } </script>
这个son.vue的组件相信大家都看得懂,加减num的组件。接下来写一个index.vue调用son.vue

// index.vue

<template>
  <div>
    <son v-bind:num="num"></son>//传递一个值给son.vue,这时候可以把son.vue的props那个注释注销掉了
    <p class="text-link">这里是index的num:{
  
  {num}}</p>
  </div>
</template>
<script> import son from './../components/son' export default { 
     data () { 
     return { 
     num:10 } }, components:{ 
     son } } </script>

这时候两个num都是10。再次点击加减按钮,我们会发现,‘son的num’一直有变化,而‘index的num’一直是10,这就是数据的单项流通。那么我们如何点击按钮然后改变‘index的num’呢?这时候,需要$emit干活了。

我们需要在index.vue里改动一下代码
首先:
<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"就是绑定一个自定义事件
再增加

methods:{ 
   
   icr(){ 
   
       this.num++;
   },
   der(){ 
   
       this.num--;
   }
}

然后在son.vue中methods变成

methods:{ 
   
   add(){ 
   
       this.$emit("add");//$emit("add")就是触发父组件中的add方法
   },
   minu(){ 
   
       this.$emit("minu");
   }
}

所以,$emit(“xxx”)触发了父组件的函数,改变了父组件的data的num值,父组件再通过props传值给子组件。从而实现数据传递,父子组件通信。
这是son.vue和index.vue的完整代码

// son.vue

<template>
<div>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是{
  
  {num}}</p>
</div>
</template>
<script> export default { 
     props:["num"], data () { 
     return { 
     num:10 } }, methods:{ 
     add(){ 
     this.$emit("add"); }, minu(){ 
     this.$emit("minu"); } } } </script>

// index.vue

<template>
 <div>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link">父{
  
  {num}}</p>
</div>
</template>
<script> import son from './../components/son' export default { 
     data () { 
     return { 
     num:10 } }, components:{ 
     son }, methods:{ 
     icr(){ 
     this.num++; }, der(){ 
     this.num--; } } } </script>
二、说说vuex以及他的
stateactionsgettersmutationsmodulesstore

首先,vuex官网上说是一个vue的状态管理工具。可能状态比较难理解,大家可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候,就把其中的变量抽离出来管理。刚好大家可以看看上面,父子组件之间的num之间的通信是不是比较麻烦,改变数据还要用$emit。如果有一个地方跟仓库一样就存放着num的值,谁要用谁去请求num的值,谁想改就改该多好是吧,vuex就是干这个的,有点全局变量的意思。任何组件需要拿,改东西,都可以找他。

1、首先state是惟一的数据载体,跟仓库一样。
2、而mutations是唯一可以改变state的值的东东,使用commit等。
这两个是vuex最最基础缺一不可的。简单的vuex管理就使用这两个就行,如何使用vuex?看这里https://segmentfault.com/a/11…
3、getters的官方说明:派生出新的状态,这个比较难理解。简单来说,就是过滤,组合!
比如说state里面存了一个数组,数组有好多个数据,而我只想要用status:0的那些个,就可以用getters。是不是有点过滤的意思。所以getters有时候还很好用,很必要!。
4、actions是用来提交mutations,wtf?怎么感觉那么多余!其实不是的,这个actions最重要的是可以包含异步操作。如何异步操作就不演示了,因为大家可能很多情况都不会使用它。
5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations;modulesB也可以有一个完整的state、actions、getters、mutations,他就是将store分割成模块,避免混淆。

好了,今天就说这一些,还是需要自己多看官网文档,多实践。跪求各位大牛指导!学习真难,求带带我…

最后还是说一下,如果文章对你有帮助的话,请给我一个star鼓励一下,我还没工作呢。。。呜呜呜

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145649.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 回归分析(stata实例详细解答过程)[通俗易懂]

    回归分析(stata实例详细解答过程)[通俗易懂]现有某电商平台846条关于婴幼儿奶粉的销售信息,每条信息由11个指标组成。其中,评价量可以从一个侧面反映顾客对产品的关注度。请对所给数据进行以下方面的分析,要求最终的分析将不仅仅有益于商家,更有益于宝妈们为宝贝选择适合自己的奶粉。(1)以评价量为因变量,分析其它变量和评价量之间的关系。(2)以评价量为因变量,研究影响评价量的重要因素。我们运用stata软件解决此问题。第一问在第一问中要求我们,以评价量为因变量,分析其它变量和评价量之间的关系。我们在这里用回归分析,…

  • JAVA数组的定义及用法

    JAVA数组的定义及用法

    2021年11月15日
  • C#泛型入门泛型类、泛型集合、泛型方法、泛型约束、泛型委托

    C#泛型入门泛型类、泛型集合、泛型方法、泛型约束、泛型委托泛型集合和ArrayList的装箱拆箱、常见的泛型类型、泛型类和泛型方法、泛型约束、泛型委托泛型很难理解?不然在接触的一个新的概念的时候,总会感觉难以理解,当你掌握并能熟练地使用的时候,发现这个概念其实简单的,我相信大多数码农都会有这种似曾相识的感觉。可能大多数人刚学习泛型的时候觉得很难理解,当然我也是这样的,所以便写下这篇文章加深一下对泛型的印象。

  • WinSCP连接VMware虚拟机被拒绝「建议收藏」

    WinSCP连接VMware虚拟机被拒绝「建议收藏」最近在做一个电商项目练手,使用了dubbo,并安装了虚拟机准备模拟熟悉一下,但是使用WinSCP一直提示拒绝连接,下面分享下我的解决办法期望对你们有帮助1.提示信息2.一开始的分析,以为是IP地址错误导致,所有ping了IP显示如下:3.分析IP地址,eth0上面显示的并不是我们常看到的4位的IP127.0.0.1这一类,继续分析可能是没有连网络,意思是:虚拟机也需要单独连接网

  • datagrip2021.11.4激活码-激活码分享[通俗易懂]

    (datagrip2021.11.4激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 三极管饱和及深度饱和状态的理解和判断!

    三极管饱和及深度饱和状态的理解和判断!三极管饱和问题总结:1.在实际工作中,常用Ib*β=V/R作为判断临界饱和的条件。根据Ib*β=V/R算出的Ib值,只是使晶体管进入了初始饱和状态,实际上应该取该值的数倍以上,才能达到真正的饱和;倍数越大,饱和程度就越深。2.集电极电阻越大越容易饱和;3.饱和区的现象就是:二个PN结均正偏,IC不受IB之控制问题:基极电流达到多少时三极管饱和?解答:这个值应该是不固定的,它和

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号