Vue组件间数据传递的那些手段

2023-12-07 17:23:23

前言

在Vue中，组件化开发是一个非常重要的思想。组件可以让我们将大型复杂的应用拆分成多个更小的可重用的组件，从而提高代码的可维护性和可复用性。但是，组件化开发也带来了一个问题：组件之间的数据如何传递？

props

props是Vue组件间数据传递最常用的一种方式。props可以让我们将父组件的数据传递给子组件。子组件可以通过this.propName来访问父组件传递过来的数据。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上面的示例中，父组件通过message prop将数据传递给了子组件。子组件可以通过this.message来访问父组件传递过来的数据。

事件

事件是Vue组件间数据传递的另一种方式。事件可以让我们子组件向父组件传递数据。子组件可以通过this.$emit('eventName', data)来触发事件，父组件可以通过v-on:eventName来监听子组件触发的事件。

// 子组件
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', '子组件发送的数据')
    }
  }
}
</script>

// 父组件
<template>
  <child-component @click="handleChildClick"></child-component>
</template>

<script>
export default {
  methods: {
    handleChildClick(data) {
      console.log(data) // 子组件发送的数据
    }
  }
}
</script>

在上面的示例中，子组件通过handleClick方法触发了click事件，父组件通过v-on:click监听了子组件触发的事件。当子组件触发click事件时，父组件会调用handleChildClick方法，并将子组件传递过来的数据作为参数传递给该方法。

状态提升

状态提升是一种将数据存储在更高级别的组件中，然后让子组件通过props访问这些数据的技术。状态提升可以让我们避免在子组件中维护自己的状态，从而简化组件的代码。

// 父组件
<template>
  <div>
    <child-component :count="count"></child-component>
    <button @click="incrementCount">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ count }}</p>
</template>

<script>
export default {
  props: ['count']
}
</script>

在上面的示例中，我们将count数据存储在了父组件中。子组件通过props访问父组件传递过来的count数据。当父组件中的count数据发生改变时，子组件中的count数据也会自动更新。

共享状态

共享状态是一种将数据存储在Vuex中，然后让所有组件通过Vuex访问这些数据的技术。共享状态可以让我们在整个应用中共享数据，从而避免在多个组件中维护相同的数据。

// Vuex store
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    incrementCount(state) {
      state.count++
    }
  }
})

// 父组件
<template>
  <div>
    <child-component></child-component>
    <button @click="incrementCount">+</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    incrementCount() {
      this.$store.commit('incrementCount')
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ count }}</p>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

在上面的示例中，我们将count数据存储在了Vuex中。父组件和子组件通过Vuex访问共享的count数据。当父组件中的count数据发生改变时，子组件中的count数据也会自动更新。

父子组件

父子组件是一种将子组件作为父组件的属性的组件组织方式。父子组件可以让我们将复杂组件拆分成更小的可重用的组件，从而提高代码的可维护性和可复用性。

// 父组件
<template>
  <child-component></child-component>
</template>

<script>
export default {
  components: {
    ChildComponent: require('./ChildComponent.vue')
  }
}
</script>

// 子组件
<template>
  <p>我是子组件</p>
</template>

<script>
export default {}
</script>