传参方式

父子传参

父组件向子组件传参

父组件引用子组件通过v-bind(简写：:src)绑定值，子组件通过props获取

  // 父组件
  <template>
    <child :message="message"></child>
  </template>
  <script>
  import Child from './Child.vue'

  export default {
    components: {
      Child
    },
    data() {
      return {
        message: 'hello vue2.x'
      }
    }
  }
  </script>


  // 子组件
  <template>
    <div>
      <span>{{message}}</span>
    </div>
  </template>
  <script>
  export default {
    props: {
      message: {
        type: String,
        default: 'test'
      }
    }
  }
  </script>

子组件向父组件传参

在子组件中使用$emit绑定一个自定义事件, 当这个执行这个语句时，就会将参数传递给父组件

## vue2.x
  // 父组件
  <template>
    count:{{num}}
    <child :num="num" @addCount="addCount"></child>
  </template>
  <script>
  import Child from './Child.vue'

  export default {
    components: {
      Child
    },
    data() {
      return {
        num: 100
      }
    },
    methods:{
      addCount(res) {
        this.num = res
      }
    }
  }
  </script>

  // 子组件
  <template>
    <div>
      <button type="primary" @click="addCount">count++</button>
    </div>
  </template>
  <script>
    export default {
      props: {
        num: {
          type: Number,
          default: 0
        }
      },
      methods:{
        addCount() {
          this.$emit('addCount', this.num + 1)
        }
      }
    }
  </script>

eventBus

EventBus又称为事件总线，可以使用它来进行组件之间通信。其实和vuex还是有些类似的，相当于所有组件共用一个事件中心，这个事件中心用来管理事件，当我们需要用到的时候就向事件中心发送或者接受事件。通过共享一个vue实例，使用该实例的$on以及$emit实现数据传递。

## vue2.x
  // eventBus.js
  const eventBus = new Vue()
  export default eventBus

  // A 组件
  import eventBus from './eventBus'
  // 通过emit发送消息
  eventBus.$emit('message')

  // B组件
  import eventBus from './eventBus'
  // 通过$on接收消息
  eventBus.$on('message', () => {
    console.log('收到消息!')
  })
  
  // 组件销毁时需要解绑监听
  beforeDestroy () {\
    eventBus.$off('message')\
  }

VUEX

安装：npmx i vuex

状态管理工具,vuex简称五个部分state(状态仓库),getters(缓存依赖),mutations(同步操作),actions(异步操作),模块(modules)。

vuex的五个核心模块

• state

  • 用来存储数据，变量

• getters

  • 监听state计算属性
  • 有return值

• mutations 同步方法

  • 第一个值是state
  • 第二个是参数

• actions: 异步方法

  • 第一个值是{dispatch,commit}
    • dispatch （‘方法名’，值） 异步调异步
    • commit （‘方法名’ ，值）异步调同步
  • 第二个是参数

• modules: 区分模块

  • namespaced:true //模块独立化

总结

1. 前四个写在modules文件下的js中
2. mutations可修改数据，actions改需调用mutations
3. 同步不可调异步，异步可调同步

使用

commit同步操作:this.$store.commit('mutations方法名'，值)

dispatch:异步操作，this.$store.dispatch('actions方法名'，值)

模块独立需要在方法名前加上是那个文件的方法 (opens new window)

辅助函数 调用VUEX模块

• mapState
  • 在computed中引入
  • ...mapState({userData: state=>state.组件名.数据})
• mapGetters
  • 在computed中引入
  • ...mapGetters({state: '组件名/state'})
• mapMutations
  • methods中引入
  • ...mapMutations({fun:'组件名/fun'})
• mapAcations
  • methods中引入
  • ...mapAcations({fun:'组件名/fun'})

vx缓存数据

因为刷新页面，修改后的需要重新请求,所以我们可以往本地存储中存放数据，页面刷新后给vx重新赋值方法如下↓ (opens new window)