[編成と共有] Vue 親コンポーネントが子コンポーネントを呼び出すための一般的なメソッドとテクニック

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 を通じてアクセスされるのは配列であることに注意してください。対応するサブコンポーネント インスタンスはインデックスに基づいて選択する必要があります。

2. イベントの使用

Vue では、親コンポーネントは

$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 プロパティを宣言し、親コンポーネントにデータを渡すことで、詳細なデータ転送を実現することもできます。

3. $parent を使用する

場合によっては、子コンポーネントで独自の親コンポーネント インスタンス オブジェクトを取得する必要がある場合があります。子コンポーネントでは

$ を使用できます。 プロパティを使用して、親コンポーネントのインスタンス オブジェクトを取得します。

次は、$parent を使用して親コンポーネントのインスタンス オブジェクトを取得する方法を示す簡単な例です:

// 子组件
<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 では、親コンポーネントが子コンポーネントを呼び出すことは非常に一般的な操作であり、$refs、events を使用して親コンポーネントと子コンポーネント間の通信を実現できます。そして $parent 。さらに、依存関係注入や vuex などのテクノロジを使用するなど、さまざまな開発ニーズを満たすための方法が他にもたくさんあります。

以上が[編成と共有] Vue 親コンポーネントが子コンポーネントを呼び出すための一般的なメソッドとテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。