一、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以及他的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勉励一下，我还没事情呢。。。呜呜呜