Vue で親コンポーネント メソッドを使用する方法

Vue.js は、現在の Web 開発で最も人気のある JavaScript フレームワークの 1 つであり、多くの強力な機能とメカニズムを備えており、最も一般的に使用されるのはコンポーネントの使用です。 Vue では、コンポーネントは論理データ バインディングとイベント応答を簡単に実装できますが、子コンポーネントで親コンポーネントのメソッドまたはデータにアクセスする必要がある場合は、いくつかの特別なテクニックを使用する必要がある場合があります。この記事では、Vueで親コンポーネントメソッドを使用する方法を紹介します。

1. 親コンポーネントのメソッドの受け渡し

Vue では、親コンポーネントのメソッドとデータをコンポーネント属性 (props) を通じて子コンポーネントに渡すことができます。以下に示すように、電卓ボタンと表示領域を含む親コンポーネントがあるとします。

<template>
  <div>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <div>{{ count }}</div>
    <child :increment="add"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    },
    sub() {
      this.count--
    }
  }
}
</script>

親コンポーネントでは、add および sub という 2 つのメソッドを定義し、それぞれカウンターを増加および減少させるために使用します。 . 数量カウント。同時に、子コンポーネント Child を作成し、親コンポーネントのメソッド add を属性インクリメントとして子コンポーネントに渡します。子コンポーネントでは、props を通じてこのプロパティを受け取り、$emit メソッドを通じて親コンポーネントに転送できます。

<template>
  <div>
    <button @click="increment()">+1</button>
    <button @click="decrement()">-1</button>
  </div>
</template>

<script>
export default {
  props: {
    increment: {
      type: Function
    }
  },
  methods: {
    increment() {
      this.$emit('increment')
    },
    decrement() {
      this.$emit('decrement')
    }
  }
}
</script>

サブコンポーネントでは、increment と decrement という 2 つのメソッドを定義します。これらは、それぞれカウンターの数を増減するために使用されます。同時に、親コンポーネントから props を通じて渡された属性の増分を受け取り、$emit メソッドを使用してこのメ​​ソッドで増分イベントをトリガーしました。

このようにして、コンポーネント間のメソッド転送を実現します。つまり、子コンポーネントは、emit メソッドを通じて親コンポーネントにイベントを渡し、親コンポーネントの対応するメソッドをトリガーできます。

2. 親コンポーネント メソッドの呼び出し

Vue では、コンポーネント属性を通じて親コンポーネント メソッドを子コンポーネントに渡すだけでなく、子コンポーネント内の親コンポーネント メソッドを直接呼び出すこともできます。 Emit メソッドを通じて親コンポーネントのイベントをトリガーします。以下では、ケースを使用して、子コンポーネントで親コンポーネントのメソッドを直接呼び出す方法を示します。

編集領域と保存ボタンを含む親コンポーネントがあり、編集領域の内容をバックエンド サーバーに保存するための save という名前のメソッドを定義しているとします。以下に示すように:

<template>
  <div>
    <textarea v-model="content"></textarea>
    <button @click="saveData">保存</button>
    <child :save-method="save"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    save() {
      // 将编辑区域内容保存到数据库中
    }
  }
}
</script>

親コンポーネントで、save という名前のメソッドを定義し、それを属性 save-method として子コンポーネント Child に渡します。

子コンポーネントでは、親コンポーネントから props を通じて渡された属性 save-method を受け取り、必要に応じてメソッドを直接呼び出すことができます。以下に示すように:

<template>
  <div>
    <button @click="save()">保存</button>
  </div>
</template>

<script>
export default {
  props: {
    saveMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    save() {
      this.saveMethod()
    }
  }
}
</script>

子コンポーネントでは、親コンポーネントから props を通じて渡された属性 save-method を受け取り、メソッド内でそのメソッドを呼び出します。このようにして、親コンポーネントのメソッドを直接呼び出す機能を実現することができる。

概要

この記事では、主にコンポーネント プロパティを渡す方法や親コンポーネント メソッドを直接呼び出す方法など、Vue で親コンポーネント メソッドを使用する方法を紹介します。 Vue の開発プロセスではコンポーネント間の情報伝達が非常に重要であり、Vue が提供するコンポーネント通信の仕組みを柔軟に活用することで、より効率的かつ柔軟なコンポーネント開発を実現できます。

以上がVue で親コンポーネント メソッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。