Analisis ringkas tentang cara berkomunikasi antara komponen ibu bapa dan anak dalam Vue (lalui daripada bapa kepada anak|berlalu daripada anak kepada bapa)

Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak dalam

Vue? Artikel berikut akan memperkenalkan kepada anda kaedah bapa kepada anak dan anak kepada bapa saya harap ia akan membantu anda!

1 Komponen induk beralih kepada komponen anak

⭐⭐

<.>Komponen induk diserahkan kepada komponen anak: melalui atribut props; [Cadangan berkaitan:
• tutorial video vuejs, pembangunan bahagian hadapan web]
Kanak-kanak itu komponen dihantar kepada komponen induk: Peristiwa pencetus melalui $emit
• 
  

Di sini kita tahu bahawa komponen induk mempunyai beberapa data yang perlu dipaparkan oleh anak; komponen, maka kita boleh melengkapkan komponen melalui
Komunikasi antara komponenprops

Komunikasi antara komponen diselesaikan melalui prop

2. Perbincangan ringkas tentang Props

⭐⭐

Jadi apakah itu
? Props

Fungsi: Terima atribut yang diluluskan oleh komponen induk
• Anda boleh mendaftarkan beberapa atribut tersuai (atribut) pada komponen itu; memberikan nilai kepada atribut ini (atribut), dan sub-komponen mendapat nilai yang sepadan melalui nama atribut; boleh menggunakan Props makro Untuk mengisytiharkan:

1) Jenis tatasusunan

script setuppropsDalam komponen yang tidak menggunakan defineProps() ,

boleh diisytiharkan menggunakan pilihan

<script>
const props = defineProps([&#39;foo&#39;])

console.log(props.foo)
</script>

:

Contoh, penggunaan sintaks objek

script setuppropprops menggunakan komponen dan atribut yang ditakrifkan oleh prop integer

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

• App.vueSubkomponen

<template>
	<show-info></show-info>
</template>

Juga:
• Jadi apakah jenis jenis yang boleh?

  showInfo.vue

  String

Nombor

 export default {
        props:{
            name :{
                type:String,
                default:"我是默认值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

Boolean

Array

• Objek
• Tarikh
• Fungsi
• Simbol
• 2) Jenis objek
• diisytiharkan dalam bentuk
• (ini agak biasa )

Gunakan

Bukan-对象props

script setup

3. Komponen anak diserahkan kepada komponen induk

defineProps({
  title: String,
  likes: Number
})

script setup

⭐⭐

export default {
  props: {
    title: String,
    likes: Number
  }
}

Komponen anak menghantar kandungan kepada komponen induk dan mencetuskan acara melalui $emit

komponen anak menghantar kandungan kepada komponen induk:

Apabila beberapa peristiwa berlaku dalam komponen anak, seperti klik dalam komponen, komponen induk perlu menukar kandungan

Apabila komponen anak mempunyai beberapa kandungan yang ingin disampaikan kepada komponen induk ;

$emit(“tambah”, kira)

Parameter pertama ialah nama acara tersuai dan yang kedua parameter ialah parameter yang diluluskan

• ⭐⭐
Ambil contoh pembilang

Di sini kita mempunyai dua subkomponen, komponen induk

Subkomponen mentakrifkan nama acara yang dicetuskan dalam keadaan tertentu

Luluskan nama acara untuk dipantau dalam komponen induk menggunakan v-on (gula sintaksis @), dan ikatkannya dengan kaedah yang sepadan; >Akhir sekali, apabila peristiwa berlaku dalam komponen anak , cetuskan peristiwa yang sepadan mengikut nama acara

1) Komponen induk
• Komponen induk mendengar kepada peristiwa penambahan atau penolakan subkomponen, dan memberikan peristiwa melalui peristiwa subkomponen Komponen induk mendengar
• Komponen induk mendengar peristiwa tersuai yang dipancarkan oleh komponen anak, dan kemudian melakukan operasi yang sepadan

2) Komponen anak 1App.vue

• Apa yang ditakrifkan di sini ialah operasi kenaikan pembilang
Selepas peristiwa sub-komponen dicetuskan, peristiwa itu dipancarkan melalui ini.$emit

3) Sub-komponen 2

<template>
    <div>
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
   <add-counter></add-counter>  
   <!-- 2.自定义su-counter组件，监听内部的sub事件 -->
   <sub-counter></sub-counter>
   </div>
</template>
<script>
import AddCounter from &#39;./AddCounter.vue&#39;
import SubCounter from &#39;./SubCounter.vue&#39;
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

AddCounter.vueApa yang ditakrifkan di sini ialah operasi pengurangan bagi kaunter

Selepas peristiwa sub-komponen dicetuskan, acara itu dipancarkan melalui kaedah

<template>
    <div>
        <button>+1</button>
        <button>+5</button>
        <button>+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 让子组件发出去一个自定义事件
                // 第一个参数自定义的事件名称，第二个参数是传递的参数
                this.$emit("add",count)
            }
        }
    }
</script>

Kes ini sangat klasik dan boleh direnung berulang kali. Lihatlah~

SubCounter.vue (Belajar perkongsian video:

Video Pengaturcaraan Asas

)

Atas ialah kandungan terperinci Analisis ringkas tentang cara berkomunikasi antara komponen ibu bapa dan anak dalam Vue (lalui daripada bapa kepada anak|berlalu daripada anak kepada bapa). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!