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

Tecode 发布于2019-08-22 18:31 / 1402人阅读

摘要：我们需要在里改动一下代码首先就是绑定一个自定义事件再增加然后在中变成就是触发父组件中的方法所以，触发了父组件的函数，改变了父组件的的值，父组件再通过传值给子组件。从而实现数据传递，父子组件通信。

一、vue的父子组件之间是如何传值的？
首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间的传值问题？这个问题也简单，vue的组件会供其他的vue页面进行调用，如果数组都是双向绑定的话，那么就容易混乱了，比如a,b页面绑了一个num=10，那b，c页面又绑了num=5,那vue实例的num到底听谁的？所以，这就是vue官网为什么说
组件之间的数据只能是单项流通的，而且由父组件传递给子组件
好，接下来就话不多说了，父子组件是如何传值的，而且谁是父谁是子呢？
例子1：先写一个组件放在component文件夹下叫son.vue好了（有点剧透的命名...）

这个son.vue的组件相信大家都看得懂，加减num的组件。接下来写一个index.vue调用son.vue

//index.vue

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

我们需要在index.vue里改动一下代码
首先：

//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



//index.vue

二、说说vuex以及他的state、actions、getters、mutations、modules、store
首先，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，为什么不用actions直接修改state值呢？其实大多数的管理工具都是这样做的，比如redux，mobx。actions定义修改的动作并且进行数据请求，通过commit再去触发对应的mutations。是很重要的一个属性，也符合解耦的思想。
5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations；modulesB也可以有一个完整的state、actions、getters、mutations，他就是将store分割成模块，避免混淆。

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

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

云服务器 GPU云服务器 vue父子组件通讯父子组件父子组件通信父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95955.html

vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
关于vue中组件传值的一些问题

摘要：一父子组件之间的传值父组件传递给子组件需要在子组件中通过接收值子组件传递给父组件自定义事件，要传输的值子父在子组件中需要通过点击事件传递给父组件值，点击事件触发后，通过自定义事件，要传递的值注意在父组件接收时必须在对应的子组件接收相应一：父子组件之间的传值** 父组件传递给子组件：需要在子组件中通过props接收值子组件传递给父组件：$emit(自定义事件，要传输的值) 子--->父...

chnmagnus 2019-08-26 10:44 评论0 收藏0
Vue2从0到1(四)：Vue组件化及组件间传值

摘要：前面讲了环境的搭建用打包和的使用以及的使用下面讲一下组件化及组件间传值主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。组件化及组件间传值组件化组件是最强大的功能之一。前面讲了环境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用下面讲一下Vue组件化及组件间传值：主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。 10.Vue组件...

geekzhou 2019-08-21 17:04 评论0 收藏0
vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 评论0 收藏0