阅读 282

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

状态管理

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

1.jpg 单项组件流

组件间通信方式回顾

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

2.jpg

父组件给子组件传值

  • 子组件中通过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,获取到的是组件实例

问题

  • 多个视图依赖同一状态
  • 来自不同视图的行为需要变更同一状态
文章分类
前端
文章标签