Quels sont les moyens de communication de vue ?

Méthode de communication : 1. Le sous-composant définit l'attribut props et définit les paramètres transmis par le composant parent à recevoir ; et le composant transmet la valeur via des littéraux lors de l'utilisation de la balise du sous-composant. 2. Les sous-composants déclenchent des événements personnalisés via $emit pour communiquer. 3. Utilisez la référence pour la communication. 4. Utilisez EventBus pour la communication. 5. Utilisez $parent ou $root pour communiquer. 6. Utilisez $attrs pour communiquer avec $listeners. 7. Utilisez provide et inject pour communiquer. 8. Utilisez vuex.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Nous savons tous que les composants sont l'une des fonctions les plus puissantes de vue. Nous pouvons considérer chaque .vue dans vue comme un composant. La communication fait référence à l'expéditeur qui transmet des informations au destinataire via un certain média et un certain format. un certain but. D'une manière générale, tout trafic d'informations est une communication entre composants, ce qui signifie que les composants (.vue) transmettent des informations d'une manière ou d'une autre pour atteindre un certain objectif. Par exemple, lorsque nous utilisons le composant table dans le cadre de l'interface utilisateur, nous pouvons accéder à la table. composant. Certaines données sont transmises, et cela constitue essentiellement la communication entre les composants.

1. Que résout la communication inter-composantes ?

Dans les temps anciens, les gens transmettaient des informations via des postes, des pigeons volants délivrant des messages, des balises d'alarme incendie, des symboles, le langage, les yeux, le toucher, etc. niveau de technologie, Avec le développement rapide de la Chine, la communication est essentiellement complétée par des moyens de communication filaires ou sans fil. Diverses méthodes de communication telles que les téléphones filaires, les téléphones fixes, les téléphones sans fil, les téléphones mobiles, Internet et même les visiophones sont apparues les unes après les autres. Dans le paragraphe ci-dessus, nous pouvons voir que l'essence de la communication est que les informations sont synchronisées et partagées avec Vue. Chaque composant a sa propre portée. Les données entre les composants ne peuvent pas être partagées. Cependant, dans le travail de développement réel, nous avons souvent besoin de partager des données entre eux. composants, qui est également la base de la communication des composants. Le but est de leur permettre de communiquer entre eux, de manière à former un système organique et complet

2 Classification de la communication entre les composants

La classification de la communication entre les composants. les composants peuvent être divisés comme suit

• Communication entre les composants parents et enfants

• Communication entre les composants frères et sœurs

• Communication entre les composants ancêtres et descendants

• Communication entre les composants non relationnels

Relation schéma :

3. Solutions de communication inter-composants

Organiser 8 solutions de communication communes dans vue

• Passer par les accessoires

• Déclencher des événements personnalisés via $emit

• Utiliser re f

• EventBus

• $parent ou $root

• attrs avec les auditeurs

• Fournir avec Inject

• Vuex

props pour transmettre des données

• Scénario applicable : le composant parent transmet les données au composant enfant

• Le composant enfant définit l'attribut props et définit les paramètres transmis par le composant parent

• Le composant parent transmet la valeur via des littéraux lors de l'utilisation de la balise du composant enfant

Composant Children.vue code><code>Children.vue

props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}

Father.vue组件

<Children name="jack" age=18 />

$emit 触发自定义事件

适用场景：子组件传递数据给父组件

子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值

父组件绑定监听器获取到子组件传递过来的参数

Chilfen.vue

this.$emit('add', good)

Father.vue

<Children @add="cartAdd($event)" />

ref

• 父组件在使用子组件的时候设置ref

• 父组件通过设置子组件ref

  <Children ref="foo" />  
    
  this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

  Father.vue

// 创建一个中央时间总线类  
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  $on(name, fn) {  
    this.callbacks[name] = this.callbacks[name] || [];  
    this.callbacks[name].push(fn);  
  }  
  $emit(name, args) {  
    if (this.callbacks[name]) {  
      this.callbacks[name].forEach((cb) => cb(args));  
    }  
  }  
}  
  
// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
// 另一种方式  
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

$emit déclenche des événements personnalisés

Scénarios applicables : les composants enfants transmettent des données au parent composants

Les composants enfants se déclenchent via $emit Définissez l'événement, le deuxième paramètre de $emit est la valeur transmise

• Le composant parent lie l'écouteur pour obtenir les paramètres transmis par le composant enfant
  Chilfen.vue

this.$bus.$emit('foo')

• Father.vue

  this.$bus.$on('foo', this.handle)

• ref

• Le composant parent définit ref lors de l'utilisation du composant enfant

Le Le composant parent définit le composant enfant refPour obtenir des données

composant parent

this.$parent.on('add',this.add)

EventBus

• scénario d'utilisation : le composant frère transmet la valeur

créer un événement central bus EventBus

le composant frère transmet les déclencheurs $emit de Définir l'événement. Le deuxième paramètre de $emit est la valeur transmise. Un autre composant frère écoute l'événement personnalisé via $on. Construisez un pont de communication via l'ancêtre commun $parent ou $root

• composant sibling

  this.$parent.emit('add')

un autre composant frère

• // child：并未在props中声明foo  
  <p>{{$attrs.foo}}</p>  
    
  // parent  
  <HelloWorld foo="foo"/>

  🎜$attrs et $listeners🎜🎜 🎜🎜🎜🎜Scénarios applicables : agents transmettant des données aux descendants🎜🎜🎜🎜Définissez les attributs de téléchargement par lots $attrs et $listeners🎜

• 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。

• 可以通过 v-bind="$attrs" 传⼊内部组件

// child：并未在props中声明foo  
<p>{{$attrs.foo}}</p>  
  
// parent  
<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue  
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>  
  
// Child2做展开  
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  
  
// Grandson使⽤  
<div @click="$emit(&#39;some-event&#39;, &#39;msg from grandson&#39;)">  
{{msg}}  
</div>

provide 与 inject

• 在祖先组件定义provide属性，返回传递的值

• 在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:'foo'  
    }  
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

vuex

• 适用场景: 复杂关系的组件数据传递

• Vuex作用相当于一个用来存储共享变量的容器 

• state用来存放共享变量的地方

• getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

• mutations用来存放修改state的方法。

• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

• 父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择ref

• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递

• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject

• 复杂关系的组件数据传递可以通过vuex存放共享的变量

【相关推荐：vuejs视频教程、web前端开发】

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!