uniappの親コンポーネントは、どのように子コンポーネントに値を渡せますか？

2年 ago
蓮, 翼
1 minute

uni-appでは、親コンポーネントから子コンポーネントへの値の受け渡しはprops属性を使用して行います。

  1. 親コンポーネントで、子コンポーネントにpropsプロパティを追加し、渡す値をpropsプロパティの値として設定します。例：
<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

<script>
  import child from '@/components/child.vue'

  export default {
    components: {
      child
    },
    data() {
      return {
        message: 'Hello, child!'
      }
    }
  }
</script>
  1. 親コンポーネントからの値を受け取る際には、子コンポーネント内でprops属性を使用します。例えば：
<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        default: ''
      }
    }
  }
</script>

親コンポーネントはprops属性を通じて子コンポーネントに値を渡すことができます。子コンポーネントはprops属性を使って親コンポーネントから渡された値を受け取り、テンプレート内で使用します。

bannerAds