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.
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
// Utilisez des accessoires pour Les données sont transmises au sous-composant et écoutent les événements déclenchés par le sous-composant via @my-event
<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> ;</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;'><button @click="sendMessage">发送消息</button></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
mounted() { console.log(this.$refs.childRef); // 获取子组件实例 this.$refs.childRef.sendMessage(); // 调用子组件的方法 }
<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>
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!