vue3 のさまざまな構文形式を比較したサンプルコード

// 親コンポーネント <テンプレート>
  <div>
    <div>
      <div>{{都市名}}</div>
      <button @click="changeReactive">リアクティブを変更する</button>
      <button @click="handleFather">親コンポーネントをクリックします</button>
    </div>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</テンプレート>

<スクリプト>
'vue' から { ref、onMounted、toRefs、reactive } をインポートします。
'./Child.vue' から Child をインポートします。

エクスポートデフォルト{
  コンポーネント:
    子供
  },
  設定 （） {
    定数ハンドルボタン = (val) => {
      console.log('btn', val)
    }

    const testClick = (val) => {
      コンソールログ('testClick', val)
    }

    定数childRef = ref(null)

    定数ハンドルファーザー = () => {
      childRef.value.observed.a = 666 //親コンポーネントが子コンポーネントの値を変更します console.log('子コンポーネントを取得する方法', childRef.value)
      // サブコンポーネントは expose を定義する必要があります。定義しない場合は、返す必要があります。対応する関数は通常、直接返されません。ページで使用されていない場合は、必要なメソッドまたは値のみを公開します。 }

    // セットアップ関数メソッドを介して記述し、ページで使用されるメソッドと値を返す必要があります // reactve によって定義された値の場合、分解によってページにレンダリングされた値はレスポンシブではないため、toRefs を介して変換してから分解する必要があります // ...toRefs(testReactive)
    
    const testReactive = リアクティブ({
      都市: '北京'、
      年齢: 22
    })

    定数changeReactive = () => {
      testReactive.city = '重慶'
    }

    戻る {
      ハンドルボタン、
      テストクリック、
      ハンドル父、
      ...toRefs(テストリアクティブ)、
      変化反応、
      子参照
    }
  }
}
</スクリプト>


//サブコンポーネント <テンプレート>
  <div>
    {{観察された.a}}
    <button @click="handleBtn">クリック</button>
  </div>
</テンプレート>

<スクリプト>
'vue' から {defineProps、defineEmits、defineEmit、defineExpose、reactive } をインポートします。

エクスポートデフォルト{
  小道具: {
    都市: 文字列
  },

  /* これは主に ctx.attrs がこの属性にアクセスできないようにするために設定されます */
  /* props に設定された一部のプロパティは attrs には表示されません*/

  出力: ['testClick'], // これを設定する目的は、attrs に対応するカスタム メソッドがないことを確認することです。
  // peops がサブコンポーネントに設定されている場合、対応する値は attrs ではアクセスできません // arrts は vue3 で機能が強化されており、カスタム メソッド、クラス、スタイルがマウントされています
  //vue2 では、カスタム メソッドは $listeners にマウントされます。vue3 では、$listeners は削除されています。setup (props, ctx) {
    const { 公開、放出 } = ctx
    定数ハンドルボタン = () => {
      コンソールログ('btn', ctx)
      出力('testClick', 666)
    }

    const 観察 = 反応的({
      1: 1
    })

    関数 clickChild (値) {
      観測値.a = 値
    }

    さらす（{
      clickChild, //カスタムメソッドを公開、親コンポーネントの呼び出しを監視//子コンポーネントの値を公開})

    戻る {
      観察された、
      ハンドルボタン
    }
  }
}
</スクリプト>

// 親コンポーネント <テンプレート>
  <div>
    <button @click="handleFather">父親をクリック</button>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</テンプレート>

<スクリプトの設定>
'vue' から { ref } をインポートします
'./Child.vue' から Child をインポートします。
// 戻りエクスポートページで使用されていないメソッドと値のこの書き方では、Vue 上の対応する定義を直接分解する必要があります。
定数childRef = ref(null)

定数ハンドルボタン = (val) => {
  console.log('btn', val)
}

const testClick = (val) => {
  コンソールログ('testClick', val)
}

定数ハンドルファーザー = () => {
  console.log('子コンポーネントを取得するメソッド', childRef.value)
  childRef.value.testFatherClick() //親コンポーネントは子コンポーネントのメソッドを呼び出します //子コンポーネントはdefineExposeを通じて対応するメソッドを公開します}

</スクリプト>


// サブコンポーネント <テンプレート>
  <div>
    <button @click="handleBtn">クリック</button>
  </div>
</テンプレート>

<スクリプトの設定>
'vue' から {defineProps、defineEmits、defineExpose、reactive } をインポートします。

const props = defineProps({
  都市: 文字列
})

const エミット = defineEmits(['handleBtn', 'testClick'])

定数ハンドルボタン = () => {
  // console.log('btn', props, 出力)
  出力('testClick', 12)
}

const testFatherClick = () => {
  console.log('テスト親コンポーネントが子コンポーネントをクリック')
}

const 観察 = 反応的({
  1: 1
})

defineExpose({ //メソッドを親グループに公開する testFatherClick,
  観察された
})

</スクリプト>

<スタイルスコープ>
</スタイル>

// 親コンポーネント import { ref, reactive } from 'vue'
'./Child.jsx' から Child をインポートします。

const 父 = {
  設定（） {
    // jsx で定義された ref は、ページで使用するときに .value を介してアクセスする必要があります。const city = ref('北京')

    定数changeCity = () => {
      city.value = '杭州'
    }

    定数childRef = ref(null)

    const handelFather = (追加) => {
      // また、コンポーネントで expose メソッドを公開することで // city.value = 'Hangzhou'
      console.log('childRef', childRef.値)
    }

    const testChildClick = (val) => {
      console.log('テストサブコンポーネントのクリック', val)
    }

    戻り値 () => {
      戻る （
        <div>
          <div>{city.value}</div>
          <button onClick={changeCity}>都市を変更</button>
          <button onClick={handelFather}>親をクリック</button>
          <子 testChildClick={testChildClick} ref={childRef} />
        </div>
      ）
    }
  }
}

エクスポートデフォルト 父


//サブコンポーネント import { ref, reactive } from 'vue'

定数子 = {
  小道具: {
    testChildClick: 関数
  },

  セットアップ(props, { 発行, 公開 }) {
    const { testChildClick } = プロパティ
    const testFatherClick = () => {
      console.log('テスト親コンポーネントが子コンポーネントをクリック')
    }

    定数handelBtn = () => {
      // emitting('testChildClick') // これは jsx では動作しません // console.log('props', props)
      testChildClick('親コンポーネントに値を返す')
      // このメソッドは、関数を介して親コンポーネントに値を渡して子コンポーネントに関数を渡す唯一の方法です。}

    さらす（{
      テスト父クリック
    })

    戻り値 () => {
      戻る （
        <div>
          <button onClick={handelBtn}>子コンポーネントは値を親コンポーネントに渡します</button>
        </div>
      ）
    }
  }
}

デフォルトの子をエクスポート