Apakah kaedah pelaksanaan komunikasi komponen Vue?

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan pendekatan pembangunan berasaskan komponen untuk membina aplikasi interaktif yang kompleks. Dalam Vue, komunikasi antara komponen adalah bahagian yang sangat penting. Ia boleh membantu kami berkongsi dan menyelaras data serta meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan beberapa kaedah pelaksanaan komunikasi komponen dalam Vue, dan melampirkan contoh kod yang sepadan.

1. kaedah props dan $emit

props dan $emit ialah kaedah komunikasi komponen yang paling asas dan biasa digunakan dalam Vue. props digunakan untuk menghantar data daripada komponen induk kepada komponen anak, dan kaedah $emit digunakan untuk mencetuskan peristiwa tersuai dalam komponen anak dan menghantar data kepada komponen induk.

Contoh:

// Komponen induk

<script><br> eksport lalai {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { message: 'Hello Vue!' } }, methods: { handleEvent(data) { console.log(data); } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>}<br></script&gt ;</p><p>// templat sub-komponen & gt; <br> & lt; rrrrrrrr<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;button @click=&quot;sendMessage&quot;&gt;发送消息&lt;/button&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><br>} l & lt;/skrip & gt; </p><p><br> $ Atribut ibu bapa dan $anak </p><p><br>$ibu bapa dan $anak digunakan dalam komponen untuk mengakses tika komponen induk atau anaknya. </p><p>Contoh: <br></p>// Komponen induk <ol start="2"><templat><li> <komponen kanak-kanak></komponen kanak-kanak></li></template></ol><p> '<komponen kanak-kanak> vue';</p><p>eksport lalai {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>props: ['message'], // 接收父组件传递的数据 methods: { sendMessage() { this.$emit('my-event', 'Hello Parent!'); // 触发自定义事件，并传递数据给父组件 } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>}<br></script>

// sub-komponen