vue3のsetup関数のパラメータの詳細解説 - propsとcontext

1.setUp関数の最初のパラメータprops

setup(props,context){}

最初のパラメータ props:

props は、親コンポーネントから子コンポーネントに渡されるすべてのデータを含むオブジェクトです。

子コンポーネントで props を使用して受信します。

宣言され、設定で渡されたすべてのプロパティを含むオブジェクト

。つまり、親コンポーネントから props を通じて子コンポーネントに渡された値を出力する場合。

構成を受信するには props を使用する必要があります。つまり、props:{......}

Props を介して構成を受け入れない場合、出力値は未定義の

<template>

  <div>
    親コンポーネント</div>
  <no-cont :mytitle="msg" 
      othertitle="他人のタイトル"
      @sonclick="ソンクリック">
  </続きなし>
</テンプレート>

<スクリプト>
「../components/NoCont.vue」から NoCont をインポートします
デフォルトのエクスポート {
  設定 （） {
    msg={ とします
      title:'親コンポーネントから子コンポーネントへのデータ'
    }
    関数sonclick(msss:string){
      コンソールログ(msss)
    }
    {msg,sonclick} を返す
  }、
  コンポーネント:{
    ノーコント
  }
}
</script>

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

<スクリプト>
import {defineComponent,setup} from 'vue';
デフォルトのエクスポートdefineComponent({
  名前: 'ノーコント'、
 // 受け入れられません // props:{
 // 私のタイトル:{
 // タイプ:オブジェクト
 // }
 // }、
  setup(props,context){
    console.log('props==>',props.mytitle);//出力値は未定義です
    関数sonHander(){
        context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</script>

props.mytitle を通じて出力される値が未定義なのはなぜですか?

構成を受信するために props を使用していないためです。それが小道具です

:{
    私のタイトル:{
        タイプ:オブジェクト
    }
2.

コンテキスト

の説明

2 番目のパラメータである context はオブジェクトです。

内部には attrs (現在のタグのすべての属性を取得するオブジェクト) があります

が、この属性は props で受け取ることが宣言されていないすべてのオブジェクトです。

props を使用して値を取得し、同時に props で取得したい値を宣言した場合

: 取得された値は unfine になります

注:

attrs の値を取得する場合、それを受け取るために props で宣言する必要はありません。 。

最初のパラメーター props によって取得された値は、

発行イベントの配布 (このイベントは親コンポーネントに渡すときに使用する必要があります)

とスロットのスロット

<template> を

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

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

3. 子コンポーネントは親コンポーネント

<template>

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

<スクリプト>
import {defineComponent,setup} from 'vue';
デフォルトのエクスポートdefineComponent({
  名前: 'ノーコント'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  }、
  setup(props,context){
    関数sonHander(){
        context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</script>

4. イベントのディスパッチを最適化します。2

番目のパラメータ context はオブジェクトであり

、そのオブジェクトには attrs、slots、および Emit の 3 つの属性があることがわかっています。

<template>

を使用しても問題ありません。

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

<スクリプト>
import {defineComponent,setup} from 'vue';
デフォルトのエクスポートdefineComponent({
  名前: 'ノーコント'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  }、
  setup(props,{attrs,slots,emit}){
    //イベントディスパッチ関数に直接エミットを使用しますsonHander(){
        Emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander} を返す
  }
});
</script>

5. 親コンポーネントによって渡された値を取得します。

値を取得するには props パラメータを使用し

、値

<template>

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

<スクリプト>
import {defineComponent,setup} from 'vue';
デフォルトのエクスポートdefineComponent({
  名前: 'ノーコント'、
  小道具:{
      私のタイトル:{
          タイプ:オブジェクト
      }
  }、
  setup(props,{attrs,slots,emit}){
    関数sonHander(){
        Emit('sonclick','子コンポーネントが親コンポーネントに渡されます')
    }
    {sonHander,attrs} を返す
  }
});
</script>

関数

• の実行タイミングは beforeCreate から created の間な
• ので、コンポーネントは作成されたばかりで、データやメソッドは初期化されていません。まだ、セットアップでデータとメソッドを使用することはできません。
セットアップ
• では
• 、非同期ではなく同期のみが可能です。

詳細については、vue3 のセットアップ関数のパラメーターについて説明します。詳細については、PHP 中国語 Web サイトの他の関連記事にご注目ください。