Vue のパブリック メソッドはどのように他のコンポーネント メソッドを呼び出すのでしょうか?

Vue では、コンポーネントの通信は非常に重要な問題です。コンポーネントは、独自の機能を実装するために別のコンポーネントのメソッドを呼び出す必要がある場合があり、この場合、コンポーネント間の通信を実現するために何らかの技術的手段を使用する必要があります。

Vue は、イベント バス、Vuex、props、emit など、コンポーネント間の通信を実装するための多くのメソッドを提供します。ただし、パブリック メソッドで他のコンポーネントのメソッドを呼び出す必要がある場合、これらのメソッドの使用は複雑で面倒になる可能性があります。現時点では、Vue インスタンスで $root と $refs を使用して、他のコンポーネント メソッドを呼び出すことができます。

$root と $refs は Vue インスタンスの 2 つのプロパティで、これを使用すると、1 つのコンポーネントから別のコンポーネントにアクセスできます。 $root はルート Vue インスタンスであり、Vue アプリケーション全体にアクセスできます。 $refs は、ref 属性を持つすべてのサブコンポーネントを含むオブジェクトです。

まず、別のコンポーネントでメソッドを定義し、テンプレート内のこのコンポーネントに ref 属性を追加する必要があります。例:

<template>
  <div>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$emit('increment')
      }
    }
  }
</script>

ここでは、インクリメント メソッドを定義し、ボタンにバインドします。ボタンをクリックすると、increment メソッドによってカスタム イベント「increment」がトリガーされます。同時に、このコンポーネントを親コンポーネントの子ノードとして指定し、ref 属性を追加します。

次に、親コンポーネントで、$refs 属性を通じて子コンポーネントにアクセスし、そのメソッドを呼び出すことができます。例:

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    created() {
      console.log(this.$refs.child)
      this.$refs.child.increment()
    }
  }
</script>

ここでは、親コンポーネントを作成し、子コンポーネント ChildComponent をテンプレートに追加します。同時に、this.$refs.child を通じて子コンポーネントのインスタンスを取得し、その increment メソッドを呼び出します。マウントされたフックが使用されるときはサブコンポーネントがまだ作成されていないため、作成されたフック内で $refs を呼び出します。

このようにして、パブリック メソッドで他のコンポーネントのメソッドを簡単に呼び出すことができます。 public メソッドの $root または $refs を通じて対応するコンポーネント インスタンスを取得し、そのメソッドを直接呼び出すだけです。

$refs は非応答オブジェクトであり、コンポーネントがレンダリングされるときにのみ設定されることに注意してください。そのため、コンポーネントがレンダリングされる前に子コンポーネントのインスタンスを取得する必要がある場合は、次のようにします。 $children 属性を使用できます。

要約すると、$root および $refs を介して他のコンポーネントを呼び出すことは、非常に便利で実用的な方法です。ただし、コンポーネントがレンダリングされているかどうか、ref 属性があるかどうかなど、いくつかの詳細に注意する必要があります。このメソッドは、パブリック メソッドで他のコンポーネント メソッドを呼び出す必要がある場合に優れたソリューションを提供します。

以上がVue のパブリック メソッドはどのように他のコンポーネント メソッドを呼び出すのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。