vue通信方法总结（未）

1. 父给子通信

//父组件
<child :fathertochild="msg"></child>

<script>
    import child from ''
    export default{
        components:{
            child
        },
        data(){
            return {
                msg:"父向子传的值"
            }
        }
    }
</script>

//子组件
<script>
    
    export default{
        
        data(){
           
        },
        props:{
            fathertochild:String
        }
    }
</script>

2. 子向父传值

//子组件
//定义一个子组件传值的方法
<input type="button" @click="childclick">
<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    method:{
        childclick(){
           //fatherMethod是在父组件on监听的方法
          //第二个参数是需要传给父亲的数据
          this.$emit("fatherMethod",this.childValue)
        }
    }
    }
</script>

<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:fatherMethod="myMethod"></child>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data(){
       name:"" 
    },
    method:{
       myMethod:function(childvalue){
       // childValue就是子组件传过来的值
       this.name=childvalue
       }
    }
</script>

3. 兄弟组件传值 eventbus

• 专门用一个空的 Vue 实例（Bus）来做中央事件总线更加清晰也易于管理。
• eventBus.js

import Vue from 'vue'
let connect = new Vue()    // 实例
export default connect

//组件a
<div @click="onclcik"></div>//点击触发传值事件
<script>
    import connect from './eventBus'
    export default{
        data(){
            return{
                msg:"组件a要传数据给b"
            }
        },
        methods:{
            onclick(){
                connect.$emit("activebus",this.msg)
            }
        }
    }
</script>

//组件b
 <script>
    import connect from './eventBus'
    export default{
        data(){
            return{
              msg:""  
            }
        },
        //组件未加载时执行事件
        mounted:{
            connect.$on("activebus",val=>{
                //箭头函数才会绑定this
                this.msg=val;
            })
        }
    }

3. vue路由传参

4. 利用本地缓存存储

5. vuex

• vuex主要做数据交互，维护公共状态或数据
  

  - image
• 可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：store.commit('increment')，我们通过提交 mutation 的方式，而非直接改变 store.state.totalPrice，是因为我们想要更明确地追踪到状态的变化，简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。
• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• Action可以进行一些异步的操作，然后再去触发mutation，所以与后端的一些接口都必须放在action里面
• mutation必须是同步操作数据方式
• Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
• 在用到state直接获取的地方，用getters的方式获取，而不是直接从state拿数据
• Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，每个状态集最后合成到一个总的store中
• 有的组件中获取到 store 中的state, 需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数