Vue 開発では、通常、親コンポーネントで子コンポーネントを呼び出す必要がある状況に遭遇します。この場合、このタスクを正しく完了するには、いくつかの基本的な知識ポイントを習得する必要があります。
この記事では、Vue の親コンポーネントが子コンポーネントを呼び出す機能を実装するための一般的なメソッドとテクニックをいくつか紹介します。
1. $refs を使用する
Vue では、各コンポーネントに独自の $refs 属性があり、コンポーネントのインスタンス オブジェクトを取得できます。したがって、親コンポーネントの $refs 属性を通じてサブコンポーネントのインスタンス オブジェクトを取得し、それによってサブコンポーネントのメソッドを呼び出したり、サブコンポーネントのプロパティにアクセスしたりできます。
これは、$refs を使用して子コンポーネントを呼び出す方法を示す簡単な例です:
<template> <div> <child-component ref="child"></child-component> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { callChildMethod () { this.$refs.child.childMethod() // 调用子组件的方法 } } } </script>
上の例では、親コンポーネント "##" で ref="child を使用しています。 #子コンポーネントのインスタンス オブジェクトを取得し、子コンポーネントのメソッド
childMethod()を呼び出します。
v-for を通じて動的に作成される場合、親コンポーネントの
$refs を通じてアクセスされるのは配列であることに注意してください。対応するサブコンポーネント インスタンスはインデックスに基づいて選択する必要があります。
$emit メソッドを通じて子コンポーネントのイベントをトリガーできます。子コンポーネントは、これらのイベントをリッスンすることで親コンポーネントと通信できます。
// 子组件 <template> <div> <button @click="emitEvent">触发事件</button> </div> </template> <script> export default { methods: { emitEvent () { this.$emit('my-event', 'hello') // 触发事件 } } } </script> // 父组件 <template> <div> <child-component @my-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { handleChildEvent (data) { console.log(data) // 打印子组件传递的数据 } } } </script>
this.$emit ('my -event', 'hello') は、
my-event という名前のイベントをトリガーし、データ
hello を渡します。親コンポーネントは、子コンポーネントに
@my-event="handleChildEvent" を追加することでイベントをリッスンし、イベント データを独自のメソッド
handleChildEvent(data) に渡します。
props プロパティを宣言し、親コンポーネントにデータを渡すことで、詳細なデータ転送を実現することもできます。
$ を使用できます。 プロパティを使用して、親コンポーネントのインスタンス オブジェクトを取得します。
// 子组件 <template> <div>{{parentMessage}}</div> </template> <script> export default { computed: { parentMessage () { return this.$parent.message // 获取父组件的数据 } } } </script> // 父组件 <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data () { return { message: '这是父组件的数据' } } } </script>
に渡されます。 computed 属性で
this.$parent.message を使用して、親コンポーネントのデータ
message を取得します。
$parentを使用するとコードの可読性が低下する可能性があるため、実際の開発では避ける必要があります。ネストレベルが深い。
以上が[編成と共有] Vue 親コンポーネントが子コンポーネントを呼び出すための一般的なメソッドとテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。