Vue コンポーネントでデータを共有および転送する方法-Vue.js-php.cn

Vue コンポーネントでデータを共有および転送する方法

王林

リリース： 2023-10-08 11:00:12

オリジナル

1520 人が閲覧しました

Vue コンポーネントでデータを共有および転送する方法

Vue コンポーネントでデータの共有と転送を実現する方法

Vue では、コンポーネントは Web アプリケーション構築の中核部分です。コンポーネント内では、データの共有と転送が非常に重要です。この記事では、Vue コンポーネントでデータを共有および転送する方法を詳しく紹介し、具体的なコード例を示します。

データ共有とは、複数のコンポーネント間で同じデータを共有することを指し、コンポーネントが異なる階層に配置されていてもデータ共有を実現できます。データの転送とは、通常は親コンポーネントと子コンポーネント間の転送を通じて、あるコンポーネントから別のコンポーネントにデータを渡すことを指します。

データ共有

1.1 Vuex の使用

Vuex は Vue が提供する状態管理モードであり、複数のコンポーネントが同じコピーを共有できるようにすることが簡単にできます。データの。以下は、Vuex を使用してデータ共有を実現する簡単な例です。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

// App.vue
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

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

ログイン後にコピー

上の例では、Vuex をインポートし、ストアオブジェクトを作成することでデータを共有します。 App.vue コンポーネントで、computed 属性を介して共有カウントデータを取得し、methods 属性を介して increment メソッドを呼び出してデータを更新します。データを共有する必要がある各コンポーネントで、Vuex をインポートし、対応する状態を使用する必要があることに注意してください。

1.2 Provide と inject の使用

Vuex の使用に加えて、Vue は、provide と inject を使用してデータを共有する簡単な方法も提供します。以下は、provide と inject を使用してデータ共有を実現する例です。

// App.vue
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

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

// Child.vue
<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="increment">Increment in Child</button>
  </div>
</template>

<script>
export default {
  inject: ['count', 'increment']
}
</script>

ログイン後にコピー

上の例では、親コンポーネント App.vue で Provide を使用して、カウントデータとインクリメントメソッドを共有します。子コンポーネント Child.vue で inject を使用して、親コンポーネントによって提供されるデータとメソッドを注入します。このようにして、親コンポーネントのデータに直接アクセスし、子コンポーネントで更新することができます。

データの送信

2.1 props の使用

Vue では、props 属性を介して親コンポーネントから子コンポーネントにデータを渡すことができます。以下は、props を使用してデータを渡す例です。

// Parent.vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <Child :message="message" />
  </div>
</template>

<script>
import Child from './Child.vue'

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

// Child.vue
<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

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

ログイン後にコピー

上の例では、親コンポーネント Parent.vue のメッセージデータを、props 属性を通じて子コンポーネント Child.vue に渡します。子コンポーネントは props 属性を介して、親コンポーネントから渡されたデータを受け取ります。