vue2-状态管理（一）

父子组件之间往往使用props和 $emit 实现数据共享，任意组件可通过bus（一个 vue 实例）作为桥梁，实现数据共享。当项目中组件越来越多时，组件之间的数据共享变得复杂，难以维护。使用 Vuex 可集中管理组件之间的数据（状态），使组件之间的数据共享变得简单。

父子组件间通信

父 →（props）子组件；子 →（$meit）父组件，即子组件自定义一个事件，在父组件中监听该事件。

自定义输入组件：

<template>
  <input @input="handleInput" :value="value" :placeholder="placeholder" />
</template>
<script>
  export default {
     
    name: "CustomInput",
    //props 接收父组件传递过来的数据
    props: {
     
      value: {
     
        type: [Number, String],
        required: true,
        default: ""
      },
      placeholder: {
     
        type: String,
        default: "提示文本"
      }
    },
    methods: {
     
      handleInput(event) {
     
        let val = event.target.value;
        // 子组件的事件监听函数中触发一个自定义事件
        this.$emit("customInput", val);
      }
    }
  };
</script>

使用组件：

<template>
  <div class="store">
    <!-- props 传递值 -->
    <custom-input :value="value" @customInput="handleInput" :placeholder="placeholder" />
    <p v-text="value"></p>
  </div>
</template>
<script>
  import CustomInput from '_c/CustomInput.vue'
  export default {
     
    name: 'Store',
    components: {
     
      CustomInput
    },
    data() {
     
      return {
     
        value: '',
        placeholder: '自定义事件传递值'
      }
    }