深入了解Vue中单向数据流的原理与管理

<template>
  <div>
    <child-component :prop1="data1" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      data1: 'hello',
    }
  },
}
</script>

<template>
  <div>
    <p>{{ prop1 }}</p>
  </div>
</template>
<script>
export default {
  props: {
    prop1: String,
  },
}
</script>

<template>
  <div>
    <child-component @custom-event="handleEvent" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    },
  },
}
</script>

<template>
  <div>
    <button @click="emitEvent">触发事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'hello')
    },
  },
}
</script>

<template>
  <div>
    <child-component :value="value" @input="updateValue" />
    <p>{{ value }}</p>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      value: 'hello',
    }
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue
    },
  },
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
})
export default store

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: mapState(['count']),
  methods: mapMutations(['increment']),
}
</script>

<template>
  <div>
    <grandparent-component>
      <parent-component>
        <child-component />
      </parent-component>
    </grandparent-component>
  </div>
</template>
<script>
import GrandparentComponent from './GrandparentComponent.vue'
import ParentComponent from './ParentComponent.vue'
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    GrandparentComponent,
    ParentComponent,
    ChildComponent,
  },
}
</script>

export default {
  provide: {
    foo: 'bar',
  },
}

export default {
  inject: ['foo'],
  mounted() {
    console.log(this.foo) // 输出bar
  },
}