Maison > interface Web > Voir.js > Quelles sont les méthodes d'implémentation de la communication des composants Vue ?

Quelles sont les méthodes d'implémentation de la communication des composants Vue ?

WBOY
Libérer: 2023-07-17 20:22:37
original
1400 Les gens l'ont consulté

Vue.js est un framework frontal populaire qui fournit une approche de développement basée sur des composants pour créer des applications interactives complexes. Dans Vue, la communication entre les composants est un élément très important. Elle peut nous aider à partager et à coordonner les données et à améliorer l'efficacité du développement. Cet article présentera plusieurs méthodes d'implémentation de communication de composants dans Vue et joindra des exemples de code correspondants.

  1. méthodes props et $emit

props et $emit sont les méthodes de communication de composants les plus basiques et les plus couramment utilisées dans Vue. les accessoires sont utilisés pour transmettre des données du composant parent au composant enfant, et la méthode $emit est utilisée pour déclencher des événements personnalisés dans le composant enfant et transmettre des données au composant parent.

Exemple :

// Composant parent

<script><br> export default {</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">Copier après la connexion</div></div><p>}<br></script&gt ;</p><p>// Sous-composant T & lt; modèle & gt; <br> & lt; div & gt; <br><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">Copier après la connexion</div></div></p> & lt;/div & lt;/test & gt; rrrrrrr<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">Copier après la connexion</div></div><p>} l & lt;/script & gt; <br></p><p> $ Attributs parent et $children<br></p><p> Les attributs $parent et $children sont utilisés à l'intérieur d'un composant pour accéder aux instances de ses composants parent ou enfant. <br></p>Exemple : <ol start="2"><li>// Composant parent </li><template></ol> <child-component></child-component><p></template></p><p><script></p> importer childComponent depuis './ChildComponent. vue';<p><br>export default {<br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { 'child-component': childComponent }, mounted() { console.log(this.$children); // 访问子组件实例 }</pre><div class="contentsignin">Copier après la connexion</div></div><br>}</p></script>


// sous-composant

<script> propriétés et méthodes. <br><br>Exemple : </p><p>// Composant parent <br><template></p> <child-component ref="childRef"></child-component><p></template><br></p><script><p> export default {<br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>mounted() { console.log(this.$parent); // 访问父组件实例 }</pre><div class="contentsignin">Copier après la connexion</div></div></p>}<ol start="3"></script>

  • // Composant enfant


    <script><br> export par défaut {<br><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>子组件</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>}<p></script>

    Il existe plusieurs façons d'implémenter la communication des composants Vue. Dans le développement réel, choisir la méthode de communication appropriée en fonction de besoins et de scénarios spécifiques peut améliorer efficacement l'efficacité du développement et la qualité du code. J'espère que cet article vous aidera à comprendre la communication des composants Vue.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal