Vue3 で SetUp 関数の props と context パラメーターを使用する方法

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

setup(props,context){}

最初のパラメータ props:

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

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

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

つまり、親コンポーネントからプロパティを通じて子コンポーネントに渡された値を出力したい場合。

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

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

<template>
  <div>
    父组件 
  </div>
  <no-cont :mytitle="msg" 
      othertitle="别人的标题"
      @sonclick="sonclick">
  </no-cont>
</template>

<script>
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:"父组件给子给子组件的数据"
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
 //  未进行接受
 //   props:{
 //     mytitle:{
 //         type:Object
 //     }
 //   },
  setup(props,context){
    console.log("props==>",props.mytitle);//输出的值是 undefined
    function sonHander(){
        context.emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

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

構成を受信するための props を使用していないためです。つまり、

props:{
    mytitle:{
        type:Object
    }
},

受け入れ設定を追加した場合

2. パラメータ context の説明

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

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

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

値を取得するために小道具を使用し、小道具で取得したい値を宣言する場合

その場合: 取得される値は未定義です

注:

値を取得するために props で Attrs を宣言する必要はありません。

最初のパラメータ props で取得した値を props で宣言する必要があります

エミットイベントの配布があります(親コンポーネントに渡す際にこのイベントを使用する必要があります)

スロット挿入があります Slot

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    //输出{title:父组件传递的值}
    console.log("props==>",props.mytitle);
    
    // 输出别人的标题【使用context获取值，不需要使用props去接受】
    console.log("context==> ",context.attrs.othertitle);
    
    // 输出undefined，因为context不需要使用props去接受。
    console.log("contextmytitle==> ",context.attrs.mytitle);
    function sonHander(){
        context.emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

3. 子コンポーネントは親コンポーネントにイベントをディスパッチします

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    function sonHander(){
        context.emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

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

2 番目のパラメーターのコンテキストははオブジェクトです

オブジェクトには attrs、slots、emit の 3 つの属性があります

#イベントがディスパッチされるときは、直接 Emit を使用しても問題ありません

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //直接使用emit进行事件派发
    function sonHander(){
        emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

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

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

#、値を取得するには attrs を使用します

<template>
<hr/>
   <h2>子组件</h2>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
    <h2>使用了props声明接收==>{{ mytitle  }}</h2> 
    <h2>使用参数attrs获取==>{{ attrs.othertitle  }}</h2> 
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    function sonHander(){
        emit("sonclick","子组件传递给父组件")
    }
    return {sonHander,attrs}
  }
});
</script>

注意すべき点をいくつか添付します。 setup 関数を使用する場合:

setup 関数の実行時間は beforeCreate と created の間です
セットアップの実行時間は created の間であるため、コンポーネントは作成されたばかりで、データとメソッドはまだ初期化されていないため、セットアップでデータとメソッドを使用することはできません
セットアップ内のこれは未定義を指します
セットアップは同期のみ可能であり、非同期はできません

以上がVue3 で SetUp 関数の props と context パラメーターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。