Vuex状态管理一——之回顾vue间通信方式

状态管理

1. state：驱动应用的数据源
2. view：以声明方式将state映射到视图
3. actions：响应在view上的用户输入导致的状态变化

单项组件流

组件间通信方式回顾

1. 父组件给子组件传值
2. 子组件给父组件传值
3. 不相关组件之间传值

父组件给子组件传值

• 子组件中通过props接收数据
• 父组件中给子组件通过相应属性传值

//子组件
export default {
    props： {
     title：String
    }
}

// 父组件
<child title="My Journey with Vue"/>

子组件给父组件传值

// 子组件
handler() {
    // 自定义事件
    this.$emit('enlargeText', '要传递的数据')
}

// 父组件
<template>
    <!--方法一-->
    <child @enlargeText="aaa"/> 
    <!--方法二 $event是事件，这种方法不怎么使用-->
    <child @enlargeText="hFontSize += $event"/>     
</template>

methods: {
    aaa(size) {
       // size 接收传递的传参
       ...
    }
}

不相关组件之间传值

需要创建一个eventbus.js, 核心还是自定义事件

// eventbus.js的代码
import Vue from 'vue'
export default new Vue()

// 一个组件使用
<template>
  <div>
    <h1>Event Bus Sibling01</h1>
    <div class="number" @click="sub">-</div>
    <input type="text" style="width: 30px; text-align: center" :value="value">
    <div class="number" @click="add">+</div>
  </div>
</template>
<script>
import bus from './eventbus'

export default {
  props: {
    num: Number
  },
  created () {
    this.value = this.num
  },
  data () {
    return {
      value: -1
    }
  },
  methods: {
    sub () {
      if (this.value > 1) {
        this.value--
        bus.$emit('numchange', this.value)
      }
    },
    add () {
      this.value++
      bus.$emit('numchange', this.value)
    }
  }
}
</script>

// 另一个组件使用
<template>
  <div>
    <h1>Event Bus Sibling02</h1>

    <div>{{ msg }}</div>
  </div>
</template>

<script>
import bus from './eventbus'
export default {
  data () {
    return {
      msg: ''
    }
  },
  created () {
    bus.$on('numchange', (value) => {
      this.msg = `您选择了${value}件商品`
    })
  }
}
</script>

其它常见方式

• $root
• $parent
• $childer
• $refs

回顾$ref

ref两个作用

1. 在普通HTML标签上使用ref，获取到的是DOM
2. 在组件标签上使用ref，获取到的是组件实例

问题

• 多个视图依赖同一状态
• 来自不同视图的行为需要变更同一状态