Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

<テンプレート>
  <div class="box">
    親コンポーネント</div>
  <no-cont :mytitle="メッセージ" 
      othertitle="他の人のタイトル"
      @sonclick="sonclick">
  </no-cont>
</テンプレート>

<script lang="ts">
「../components/NoCont.vue」からNoContをインポートします。
エクスポートデフォルト{
  設定 （） {
    メッセージを = {
      タイトル:「親コンポーネントから子コンポーネントへのデータ」
    }
    関数sonclick(msss:文字列){
      コンソール.log(msss)
    }
    {msg,sonclick} を返す
  },
  コンポーネント:{
    続きなし
  }
}
</スクリプト>

<テンプレート>
    <div @click="sonHander">
        私は子コンポーネントのデータです</div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent,setup} をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'NoCont'、
 // 受け入れられません // props:{
 // タイトル:{
 // タイプ:オブジェクト
 // }
 // },
  セットアップ(プロパティ、コンテキスト){
    console.log('props==>',props.mytitle);//出力値は未定義です
    関数sonHander(){
        context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</スクリプト>

小道具:{
    私のタイトル:{
        タイプ:オブジェクト
    }
},

<テンプレート>
    <div @click="sonHander">
        私は子コンポーネントのデータです</div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent,setup} をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'NoCont'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  },
  セットアップ(プロパティ、コンテキスト){
    //出力 {title: 親コンポーネントから渡された値}
    コンソールにログ出力します。
    
    // 他の人のタイトルを出力します [値を取得するにはコンテキストを使用します。値を受け入れるためにプロパティを使用する必要はありません]
    console.log('context==> ',context.attrs.othertitle);
    
    // コンテキストは受け入れるために props を使用する必要がないため、undefined を出力します。
    console.log('contextmytitle==> ',context.attrs.mytitle);
    関数sonHander(){
        context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</スクリプト>

<テンプレート>
    <div @click="sonHander">
        私は子コンポーネントのデータです</div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent,setup} をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'NoCont'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  },
  セットアップ(プロパティ、コンテキスト){
    関数sonHander(){
        context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</スクリプト>

<テンプレート>
    <div @click="sonHander">
        私は子コンポーネントのデータです</div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent,setup} をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'NoCont'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  },
  セットアップ(props,{attrs,slots,emit}){
    // イベントを直接ディスパッチするには、emit を使用します。function sonHander(){
        emitting('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</スクリプト>

<テンプレート>
<hr/>
   <h2>サブコンポーネント</h2>
    <div @click="sonHander">
        私は子コンポーネントのデータです</div>
    <h2>props 宣言を使用して ==>{{ mytitle } を受け取ります}</h2> 
    <h2>パラメータ attrs を使用して ==>{{ attrs.othertitle } を取得します}</h2> 
</テンプレート>

<script lang="ts">
'vue' から {defineComponent,setup} をインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'NoCont'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  },
  セットアップ(props,{attrs,slots,emit}){
    関数sonHander(){
        emitting('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander,attrs} を返します
  }
});
</スクリプト>