uniapp サブコンポーネントが親コンポーネントのデータを取得できない場合はどうすればよいですか?

uniapp を使用して小さなプログラムや H5 アプリケーションを開発するプロセスでは、サブコンポーネントが親コンポーネントのデータを取得する必要がある状況によく遭遇します。コンポーネントは、親コンポーネントから渡されたデータを取得できません。これは、Vue では、子コンポーネントが親コンポーネントのデータに直接アクセスできないためです。では、この問題をどうやって解決すればよいでしょうか?この記事では、開発プロセス中にこの問題をスムーズに解決するのに役立ついくつかの解決策を以下に示します。

1. props を使用してデータを渡す

Vue では、データは props (プロパティ) を通じて子コンポーネントに渡されるため、子コンポーネントは親コンポーネントから渡されたデータを使用できます。親コンポーネントで値を定義し、それを子コンポーネントにバインドすることで、子コンポーネントが値を読み取ることができます。以下はサンプル コードです。

親コンポーネント:

<template>
  <div>
    <child-component :parentData="parentData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  }
}
</script>

子コンポーネント:

<template>
  <div>{{parentData}}</div>
</template>
<script>
export default {
  props: {
    parentData: String
  }
}
</script>

props を介してデータを渡すことは、Vue で最も一般的に使用される方法です。ただし、親コンポーネントがロードされる前に子コンポーネントがデータを取得する必要があるなど、特殊な状況に遭遇することがあります。現時点では、別の方法を使用する必要があります。

2. $parent を使用して親コンポーネントのインスタンスを取得します。

Vue は、親コンポーネントのインスタンスを取得するために使用できる $parent 属性を提供します。このインスタンスを通じて、親コンポーネントのデータを直接呼び出すことができます。以下はサンプル コードです。

親コンポーネント:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  },
  mounted() {
    this.$refs.child.printParentData()
  }
}
</script>

子コンポーネント:

<template>
  <div>子组件</div>
</template>
<script>
export default {
  methods: {
    printParentData() {
      console.log(this.$parent.parentData)
    }
  }
}
</script>

上記のコードでは、$parent を通じて親コンポーネントのインスタンスを取得し、 call このインスタンスのparentData データは、最終的に親コンポーネントのデータを正常に取得しました。

この方法を不適切に使用すると、結合の問題が発生する可能性があるため、使用する場合は、特定のシナリオに基づいて長所と短所を比較検討する必要があることに注意してください。

3. $emit を使用して親コンポーネント イベントをトリガーする

props と $parent を使用して親コンポーネント データを取得することに加えて、$emit を通じて親コンポーネント イベントをトリガーしてデータを渡すこともできます。具体的な実装プロセスは次のとおりです。

親コンポーネント:

<template>
  <div>
    <child-component @getChildData="getChildData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    getChildData(data) {
      this.parentData = data
    }
  }
}
</script>

子コンポーネント:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('getChildData', '来自子组件的数据')
    }
  }
}
</script>

上記のコードでは、 $emit を通じて getChildData という名前のイベントをトリガーしました。子コンポーネントで渡す必要があるデータを親コンポーネントに渡します。親コンポーネントでは、@getChildData イベントをバインドして、子コンポーネントから渡されたデータを受け取り、parentData に保存します。

データを受信するイベント名は開発者が定義できますが、子コンポーネントと親コンポーネントのイベント名が一致していることを確認してください。

上記はuniappサブコンポーネントjsが親コンポーネントのデータを取得できない問題の解決策です。さまざまなシナリオで、この問題を解決するためにさまざまな方法を選択できます。この記事が皆さんのお役に立てば幸いです。

以上がuniapp サブコンポーネントが親コンポーネントのデータを取得できない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。