คำอธิบายโดยละเอียดเกี่ยวกับพารามิเตอร์ของฟังก์ชันการตั้งค่าใน vue3 - อุปกรณ์ประกอบฉากและบริบท

1. อุปกรณ์ประกอบฉากพารามิเตอร์แรกของฟังก์ชัน setUp

setup(props,context){}

พารามิเตอร์ตัวแรก อุปกรณ์ประกอบฉาก:

อุปกรณ์ประกอบฉากเป็นอ็อบเจ็กต์ที่มีข้อมูลทั้งหมดที่ส่งผ่านโดยองค์ประกอบหลักไปยังองค์ประกอบลูก

ใช้อุปกรณ์ประกอบฉากในคอมโพเนนต์ลูกเพื่อรับ

วัตถุที่มีคุณสมบัติทั้งหมดที่ประกาศและส่งผ่านในการกำหนดค่า

กล่าวคือ: หากคุณต้องการส่งออกค่าที่ส่งผ่านโดยองค์ประกอบหลักไปยังองค์ประกอบย่อยผ่านอุปกรณ์ประกอบฉาก

คุณต้องใช้อุปกรณ์ประกอบฉากเพื่อรับการกำหนดค่า นั่นคือ อุปกรณ์ประกอบฉาก:{......}

หากคุณไม่ยอมรับการกำหนดค่าผ่านอุปกรณ์ประกอบฉาก ค่าเอาท์พุตจะไม่ได้กำหนดไว้

<template>
  <div>
    องค์ประกอบหลัก</div>
  <ไม่มีต่อ :mytitle="msg" 
      othertitle="ชื่ออื่นๆ"
      @sonclick="sonclick">
  </ไม่มีต่อ>
</แม่แบบ>

<สคริปต์>
นำเข้า NoCont จาก "../components/NoCont.vue"
ค่าเริ่มต้นการส่งออก {
  ตั้งค่า () {
    ให้ผงชูรส={
      title:'ข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อย'
    -
    ฟังก์ชั่น sonclick (msss: string) {
      console.log(msss)
    -
    กลับ {msg,sonclick}
  -
  ส่วนประกอบ:{
    ไม่มีต่อ
  -
-
</สคริปต์>

<เทมเพลต>
    <div @click="sonHander">
        ฉันเป็นข้อมูลในองค์ประกอบย่อย</div>
</แม่แบบ>

<สคริปต์>
นำเข้า { DefineComponent, ตั้งค่า } จาก 'vue';
ส่งออก defaultdefineComponent({
  ชื่อ: 'โนคอนต์',
 // ไม่ยอมรับ // อุปกรณ์ประกอบฉาก:{
 // ชื่อของฉัน:{
 // ประเภท:วัตถุ
 -
 -
  การตั้งค่า (อุปกรณ์ประกอบฉากบริบท) {
    console.log('props==>',props.mytitle);//ไม่ได้กำหนดค่าเอาต์พุต
    ฟังก์ชั่น sonHander(){
        context.emit('sonclick','องค์ประกอบลูกถูกส่งไปยังองค์ประกอบหลัก')
    -
    กลับ {sonHander}
  -
-
</สคริปต์>

เหตุใดค่าที่ส่งออกผ่าน props.mytitle จึงไม่ได้ถูกกำหนดไว้

เพราะเราไม่ได้ใช้อุปกรณ์ประกอบฉากในการรับการกำหนดค่า นั่นคือ

อุปกรณ์ประกอบฉาก:{
    ชื่อของฉัน:{
        ชนิด:วัตถุ
    -
}

ถ้าเราเพิ่มการกำหนดค่าการยอมรับ

2. คำอธิบายบริบทของพารามิเตอร์

พารามิเตอร์ที่สอง: บริบท คือวัตถุ

มี attrs อยู่ข้างใน (วัตถุที่ได้รับคุณลักษณะทั้งหมดบนแท็กปัจจุบัน)

แต่คุณลักษณะนี้เป็นวัตถุทั้งหมดที่ไม่ได้ประกาศว่าจะได้รับในอุปกรณ์ประกอบฉาก

หากคุณใช้อุปกรณ์ประกอบฉากเพื่อรับค่าและในเวลาเดียวกันคุณประกาศค่าที่คุณต้องการรับในอุปกรณ์ประกอบฉาก

: ค่าที่ได้รับคือ undefed

หมายเหตุ:

การได้รับค่า attrs ไม่จำเป็นต้องประกาศในอุปกรณ์ประกอบฉากเพื่อรับมัน .

ค่าที่ได้รับจากอุปกรณ์ประกอบฉากพารามิเตอร์แรกจะต้องประกาศในอุปกรณ์ประกอบฉากเพื่อรับ

การกระจายเหตุการณ์การเปล่งแสง (จำเป็นต้องใช้เหตุการณ์นี้เมื่อส่งผ่านไปยังองค์ประกอบหลัก)

และช่องสล็อต

<template>
    <div @click="sonHander">
        ฉันเป็นข้อมูลในองค์ประกอบลูก</div>
</แม่แบบ>

<สคริปต์>
นำเข้า { DefineComponent, ตั้งค่า } จาก 'vue';
ส่งออก defaultdefineComponent({
  ชื่อ: 'โนคอนต์',
  อุปกรณ์ประกอบฉาก:{
      ชื่อของฉัน:{
          ชนิด:วัตถุ
      -
  -
  การตั้งค่า (อุปกรณ์ประกอบฉากบริบท) {
    // เอาต์พุต {ชื่อ: ค่าที่ส่งผ่านโดยองค์ประกอบหลัก}
    console.log('props==>',props.mytitle);
    
    // แสดงชื่อคนอื่น [ใช้บริบทเพื่อรับค่า ไม่จำเป็นต้องใช้อุปกรณ์ประกอบฉากเพื่อยอมรับ]
    console.log('context==> ',context.attrs.othertitle);
    
    // เอาต์พุตไม่ได้กำหนด เนื่องจากบริบทไม่จำเป็นต้องใช้อุปกรณ์ประกอบฉากในการยอมรับ
    console.log('contextmytitle==> ',context.attrs.mytitle);
    ฟังก์ชั่น sonHander(){
        context.emit('sonclick','องค์ประกอบลูกถูกส่งไปยังองค์ประกอบหลัก')
    -
    กลับ {sonHander}
  -
-
</สคริปต์>

3. องค์ประกอบลูกส่งเหตุการณ์ไปยังองค์ประกอบหลัก

<template>
    <div @click="sonHander">
        ฉันเป็นข้อมูลในองค์ประกอบลูก</div>
</แม่แบบ>

<สคริปต์>
นำเข้า { DefineComponent, ตั้งค่า } จาก 'vue';
ส่งออก defaultdefineComponent({
  ชื่อ: 'โนคอนต์',
  อุปกรณ์ประกอบฉาก:{
      ชื่อของฉัน:{
          ชนิด:วัตถุ
      -
  -
  การตั้งค่า (อุปกรณ์ประกอบฉากบริบท) {
    ฟังก์ชั่น sonHander(){
        context.emit('sonclick','องค์ประกอบลูกถูกส่งไปยังองค์ประกอบหลัก')
    -
    กลับ {sonHander}
  -
-
</script>

4. ปรับการส่งเหตุการณ์ให้เหมาะสม

เรา

รู้ว่าบริบทพารามิเตอร์ที่สองคือวัตถุ

และวัตถุนั้นมีแอตทริบิวต์สามรายการ ได้แก่ attrs, slot และ emit

เมื่อส่งเหตุการณ์ สามารถใช้ emit โดยตรงได้

    <div @click="sonHander">
        ฉันเป็นข้อมูลในองค์ประกอบลูก</div>
</แม่แบบ>

<สคริปต์>
นำเข้า { DefineComponent, ตั้งค่า } จาก 'vue';
ส่งออก defaultdefineComponent({
  ชื่อ: 'โนคอนต์',
  อุปกรณ์ประกอบฉาก:{
      ชื่อของฉัน:{
          ชนิด:วัตถุ
      -
  -
  การตั้งค่า (อุปกรณ์ประกอบฉาก, {attrs, สล็อต, ปล่อย}) {
    //ใช้ emit โดยตรงสำหรับฟังก์ชันจัดส่งเหตุการณ์ sonHander(){
        emit('sonclick','องค์ประกอบลูกถูกส่งไปยังองค์ประกอบหลัก')
    -
    กลับ {sonHander}
  -
-
</script>

5. รับค่าที่ส่งผ่านโดยองค์ประกอบหลัก

เราจะใช้พารามิเตอร์อุปกรณ์ประกอบฉากเพื่อรับค่า

และ attrs เพื่อรับค่า

<template>
<ชม./>
   <h2>ส่วนประกอบย่อย</h2>
    <div @click="sonHander">
        ฉันเป็นข้อมูลในองค์ประกอบย่อย</div>
    <h2>ใช้คำสั่งประกอบฉากเพื่อรับ ==>{{ mytitle }}</h2> 
    <h2>ใช้พารามิเตอร์ attrs เพื่อรับ ==>{{ attrs.othertitle }}</h2> 
</แม่แบบ>

<สคริปต์>
นำเข้า { DefineComponent, ตั้งค่า } จาก 'vue';
ส่งออก defaultdefineComponent({
  ชื่อ: 'โนคอนต์',
  อุปกรณ์ประกอบฉาก:{
      ชื่อของฉัน:{
          ชนิด:วัตถุ
      -
  -
  การตั้งค่า (อุปกรณ์ประกอบฉาก, {attrs, สล็อต, ปล่อย}) {
    ฟังก์ชั่น sonHander(){
        emit('sonclick','องค์ประกอบลูกถูกส่งไปยังองค์ประกอบหลัก')
    -
    ส่งคืน {sonHander, attrs}
  -
-
</สคริปต์>

สิ่งที่แนบมาด้วยคือประเด็นที่ควรทราบเมื่อใช้ฟังก์ชันการตั้งค่า:

• เวลาดำเนินการของฟังก์ชันการตั้งค่าอยู่ระหว่าง beforeCreate และถูกสร้าง
• เนื่องจากระยะเวลาการดำเนินการการตั้งค่าอยู่ระหว่างการสร้าง ส่วนประกอบจึงเพิ่งถูกสร้างขึ้น และข้อมูลและวิธีการยังไม่ได้รับการเตรียมใช้งาน ดังนั้นจึงไม่สามารถใช้ข้อมูลและวิธีการในการตั้งค่า
• ได้ การตั้งค่านี้
• สามารถเป็นแบบซิงโครนัสเท่านั้น ไม่ใช่แบบอะซิงโครนัส

ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับพารามิเตอร์ของฟังก์ชันการตั้งค่าใน vue3 - อุปกรณ์ประกอบฉากและบริบท ข้อมูลโปรดใส่ใจกับบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese !