強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する

<テンプレート>
  <my-component :num="num" @click="addNum" />
</テンプレート>

<スクリプトの設定>
  'vue' から { ref } をインポートします。
  './MyComponent .vue' から MyComponent をインポートします。

  // 通常のセットアップと同じように記述しますが、変数を返す必要はありません。const num = ref(0) // ここで定義されたnumは直接使用できます。const addNum = () => { // 関数は、戻り値にnum.value++を返さずに直接参照することもできます。
  }
</スクリプト>

// キャメルケースを使用する必要があります

<テンプレート>
    <zi-hello></zi-hello>
</テンプレート>

<スクリプトの設定>
  './ziHello' から ziHello をインポートします
</スクリプト>

<テンプレート>
  <div class="die">
    <h3>私は親コンポーネントです</h3>
    <zi-hello :name="名前"></zi-hello>
  </div>
</テンプレート>

<スクリプトの設定>
  './ziHello' から ziHello をインポートします
  
  'vue' から {ref} をインポートします
  let name = ref('赵小磊========')
</スクリプト>

<テンプレート>
  <div>
    私はサブコンポーネント {{name}} です // Zhao Xiaolei========
  </div>
</テンプレート>

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

  定義プロパティ({
   名前：{
     タイプ:文字列、
     デフォルト:'私はデフォルト値です'
   }
 })
</スクリプト>

<テンプレート>
  <div>
    私は子コンポーネント {{name}} です
    <button @click="ziupdata">ボタン</button>
  </div>
</テンプレート>

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

  //カスタム関数、親コンポーネントがトリガー可能 const em=defineEmits(['updata'])
  const ziupdata=()=>{
    em("updata",'私は子コンポーネントの値です')
  }

</スクリプト>

<テンプレート>
  <div class="die">
    <h3>私は親コンポーネントです</h3>
    <zi-hello @updata="updata"></zi-hello>
  </div>
</テンプレート>

<スクリプトの設定>
  './ziHello' から ziHello をインポートします
  
  const updata = (データ) => {
    console.log(data); //私は子コンポーネントの値です}
</スクリプト>

<テンプレート>
  <div>
    私は子コンポーネントです</div>
</テンプレート>

<スクリプトの設定>
  'vue' から {defineExpose、reactive、ref} をインポートします。
  ziage = ref(18)とする
  ziname = リアクティブ({
    名前:'趙小雷'
  })
  //露出変数 defineExpose({
    ジアージュ、
    ジナメ
  })
</スクリプト>

<テンプレート>
  <div class="die">
    <h3 @click="isclick">私は親コンポーネントです</h3>
    <zi-hello ref="zihello"></zi-hello>
  </div>
</テンプレート>

<スクリプトの設定>
  './ziHello' から ziHello をインポートします
  'vue' から {ref} をインポートします
  const zihello = ref()

  定数isclick = () => {
    console.log('ref によって公開された値を受け取ります',zihello.value.ziage)
    console.log('reactive によって公開された値を受け取ります',zihello.value.ziname.name)
  }
</スクリプト>