Maison > Article > interface Web > Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

青灯夜游avant: 2022-08-12 20:30:246233parcourir

VueComment communiquer entre composants ? L'article suivant vous présentera la méthode de communication des composants Vue. J'espère qu'il vous sera utile !

Les deux fonctionnalités majeures de vue sont la programmation réactive et la composantisation. Le composant est la fonction principale de Vue, mais la portée de chaque instance de composant est indépendante les unes des autres, ce qui signifie que les données entre différents composants ne peuvent pas se référencer directement. Si vous souhaitez référencer des données entre composants, vous devez utiliser la communication entre composants. Avant de communiquer, vous devez d'abord comprendre la relation entre les composants :

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

Comme le montre la figure ci-dessus :
Relation père-enfant : A et B, A et C, B et D, C et E
Relation fraternelle : B et C
Relation de génération (peut-être à plus de générations d'intervalle) : A et D, A et E
Relation inter-niveaux : B et E, D et E, etc. .

Méthode de communication

1. `props`/`$emitprops`/`$emit`

父组件通过v-bind绑定一个自定义的属性，子组件通过props接收父组件传来的数据；子组件通过$emit触发事件，父组件用on()或者在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，从而接收子组件传来的数据。（学习视频分享：vue视频教程）

1、父组件向子组件传值

下面通过一个例子来说明父组件向子组件传值，父组件parent.vue把数据books:['JavaScript高级程序设计', 'CSS新世界', '图解 HTTP 彩色版']传给子组件child.vue，并在child.vue中展示出来

// 父组件parent.vue
<template>
  <div>
    <child></child>
  </div>
</template>

<script>
import Child from &#39;./components/Child.vue&#39;

export default {
  name: &#39;parent&#39;,
  components: {
    Child
  },
  data() {
    return {
      books: [&#39;JavaScript高级程序设计&#39;, &#39;CSS新世界&#39;, &#39;图解 HTTP 彩色版&#39;]
    }
  }
}
</script>

// 子组件child.vue
<template>
  <div>
    <ul>
      <li>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    books: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants
注意：通过props传递数据是单向的，父组件数据变化时会传递给子组件，但子组件不能通过修改props传过来的数据来修改父组件的相应状态，即所谓的单向数据流。

2、子组件向父组件传值

下面通过子组件点击书籍列表，用$emit()触发，然后再父组件中获取

// 子组件child.vue
<template>
  <div>
    <ul>
      <li>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    books: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    like(item) {
      this.$emit(&#39;likeBook&#39;, item)
    }
  }
}
</script>

// 父组件parent.vue
<template>
  <div>
    <child></child>
  </div>
</template>

<script>
import Child from &#39;./components/Child.vue&#39;

export default {
  name: &#39;parent&#39;,
  components: {
    Child
  },
  data() {
    return {
      books: [&#39;JavaScript高级程序设计&#39;, &#39;CSS新世界&#39;, &#39;图解 HTTP 彩色版&#39;]
    }
  },
  methods: {
    likeBook(val) {
      alert(&#39;我最喜欢的书籍是《&#39; + val + &#39;》&#39;)
    }
  }
}
</script>

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

二、`&dollar;parent`/`$children`

$parent：访问父组件实例
$children：访问子组件实例

// 父组件parent.vue
<template>
  <div>
    <child></child>
    <button>获取子组件数据</button>
  </div>
</template>

<script>
import Child from &#39;./components/Child.vue&#39;

export default {
  name: &#39;parent&#39;,
  components: {
    Child
  },
  data() {
    return {
      books: [&#39;JavaScript高级程序设计&#39;, &#39;CSS新世界&#39;, &#39;图解 HTTP 彩色版&#39;]
    }
  },
  methods: {
    getChildData() {
      alert(this.$children[0].msg)
    }
  }
}
</script>

// 子组件child.vue
<template>
  <div>
    <ul>
      <li>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: &#39;child&#39;,
  data() {
    return {
      bookLists: [],
      msg: &#39;我是子组件的值！&#39;
    }
  },
  mounted() {
    this.bookLists = this.$parent.books
  }
}
</script>

注意：&dollar;parent拿到的是对象，如果是最顶层没有父组件的情况下拿到的是undefined；$children拿到的是数组，如果是做底层没有子组件的情况下，拿到的是空数组;这两种通信方式只能用于父子组件通信

三、`ref`

ref如果在普通Dom元素上使用，引用指向的就是 DOM 元素；如果在子组件上使用，引用就指向组件实例，可以通过实例直接调用组件的方法和数据

// 父组件parent.vue
<template>
  <div>
    <child></child>
    <button>获取子组件数据</button>
  </div>
</template>

<script>
import Child from &#39;./components/Child.vue&#39;

export default {
  name: &#39;parent&#39;,
  components: {
    Child
  },
  methods: {
    getChildData() {
      const msg = this.$refs[&#39;child&#39;].msg
      console.log(msg)
      this.$refs[&#39;child&#39;].say()
    }
  }
}
</script>

// 子组件child.vue
<script>
export default {
  name: &#39;child&#39;,
  data() {
    return {
      msg: &#39;我是子组件的值！&#39;
    }
  },
  methods: {
    say() {
      alert(&#39;你好，我是子组件！&#39;)
    }
  },
}
</script>

四、`provide`/`inject`

祖先组件通过provide来提供变量，子孙组件通过inject注入变量来获取祖先组件的数据，不管子孙组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据。下面是具体代码：

// 父组件
<template>
  <div>
    <h1>康熙</h1>
    <son></son>
  </div>
</template>

<script>
import Son from &#39;./components/Son.vue&#39;

export default {
  components: {
    Son
  },
  provide() {
    return {
      FatherToSon: this.FatherToSon,
      FatherToGrandson: this.FatherToGrandson,
    }
  },
  data() {
    return {
      FatherToSon: &#39;我是康熙，雍正，你是我儿子！&#39;,
      FatherToGrandson: &#39;我是康熙，乾隆，你是我孙子！&#39;,
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <h1>雍正</h1>
    <button>接收</button>
    <grandson></grandson>
  </div>
</template>

<script>
import Grandson from &#39;./Grandson.vue&#39;
export default {
  components: { 
    Grandson 
  },
  inject: [&#39;FatherToSon&#39;],
  methods: {
    receive() {
      alert(this.FatherToSon)
    }
  }
}
</script>

// 孙组件
<template>
  <div>
    <h1>乾隆</h1>
    <button>接收</button>
  </div>
</template>

<script>
export default {
  inject: [&#39;FatherToGrandson&#39;],
  methods: {
    receive() {
      alert(this.FatherToGrandson)
    }
  }
}
</script>

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants
注意：provide/inject只能从上往下传值，且不是响应式，若要变成响应式的数据provide需要提供函数

五、`eventBus`的`&dollar;emit`/`$on`

Le composant parent lie un attribut personnalisé via v-bind, et le composant enfant reçoit les données du composant parent via props ; le composant enfant déclenche des événements via $emit et le composant parent utilise on() ou dans le composant enfant Utilisez v-on sur la balise personnalisée pour écouter les événements personnalisés déclenchés par le sous-composant afin de recevoir des données du sous-composant. (Partage de vidéos d'apprentissage : vue vidéo tutoriel
)

🎜1. Le composant parent transmet la valeur au composant enfant🎜

🎜Ce qui suit utilise un exemple pour illustrer le composant parent transmettant la valeur au composant enfant. Le composant parent parent.vue met les données books :['JavaScript Advanced. Programming', 'CSS New World', 'Illustrated HTTP Color Version'] est transmis au composant enfant child.vue et affiché dans child.vue🎜

// main.js
// 全局添加事件总线
Vue.prototype.$bus = new Vue()

// 父组件parent.vue
<template>
  <div>
    <childa></childa>
    <childb></childb>
  </div>
</template>

<script>
import ChildA from &#39;./components/childA&#39;
import ChildB from &#39;./components/childB&#39;
export default {
  components: {
    ChildA,
    ChildB
  }
}
</script>

🎜

résultat de transmission de la valeur des accessoires

🎜Remarque : la transmission des données via les accessoires est unidirectionnelle. Lorsque les données du composant parent changent, elles seront transmises au composant enfant, mais le composant enfant ne peut pas modifier l'état correspondant du composant parent en modifiant les données transmises par les accessoires, c'est ce qu'on appelle le flux de données unidirectionnel. 🎜🎜2. Le composant enfant transmet la valeur au composant parent 🎜🎜 Ensuite, cliquez sur la liste de livres via le composant enfant, déclenchez-la avec $emit(), puis récupérez-la à partir du composant parent. 🎜

// ChildA组件
<template>
  <div>
    <h1>组件A</h1>
    <button>发送</button>
  </div>
</template>

<script>
export default {
  methods: {
    // 发送事件
    send() {
      this.$bus.$emit(&#39;message&#39;, &#39;欢迎使用eventBus!&#39;)
    }
  }
}
</script>

// ChildB组件
<template>
  <div>
    <h1>组件B</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // 接收事件
    this.$bus.$on(&#39;message&#39;, data => {
      alert(&#39;我是组件B，我收到的消息为：&#39; + data)
    })
  },
  beforeDestroy() {
    this.$bus.$off(&#39;message&#39;)
  }
}
</script>

🎜

Le composant enfant transmet la valeur résultat au composant parent

🎜🎜2. &dollar;parent/ $children🎜

$parent : accéder à l'instance du composant parent
$children : accéder à l'instance du composant enfant

// 父组件
<template>
  <div>
    <childa></childa>
  </div>
</template>

<script>
import ChildA from &#39;./components/childA&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    ChildA,
  },
  data() {
    return {
      name: &#39;小明&#39;,
      age: 18,
      sex: &#39;男&#39;
    }
  },
  methods: {
    // 获取名字
    getName() {
      console.log(&#39;我的名字是&#39; + this.name)
    },
    // 获取年龄
    getAge() {
      console.log(&#39;我今年&#39; + this.age + &#39;岁&#39;);
    }
  }
}
</script>

// 子组件A
<template>
  <div>
    <h1>组件A</h1>
    {{ msgA }}
    <hr>
    <childb></childb>
  </div>
</template>

<script>
import ChildB from &#39;./childB.vue&#39;
export default {
  name: &#39;ChildA&#39;,
  components: {
    ChildB
  },
  data() {
    return {
      msgA: null,
      height: &#39;175cm&#39;
    }
  },
  props: {
    sex: {
      type: String,
      default: &#39;&#39;
    }
  },
  mounted() {
    this.msgA = this.$attrs
    console.log(&#39;组件A获取的$listeners:&#39;, this.$listeners)
  },
  methods: {
    // 获取身高
    getHeight() {
      console.log(&#39;我的身高是&#39; + this.height);
    }
  }
}
</script>

🎜Remarque : &dollar;parent obtient l'objet. S'il s'agit du composant de niveau supérieur et qu'il n'y a pas de composant parent. Dans le cas de undefined, $children obtient un tableau. . S'il n'y a pas de sous-composants dans la couche inférieure, il obtient un tableau vide ; ceci Les deux méthodes de communication ne peuvent être utilisées que pour la communication des composants parent-enfant🎜🎜3 ref🎜🎜ref. Si elle est utilisée sur un élément Dom normal, la référence pointe vers l'élément DOM ; si elle est utilisée sur un composant enfant, la référence pointe vers l'élément DOM, vous pouvez directement appeler les méthodes et les données du composant via l'instance 🎜.

// 孙组件B
<template>
  <div>
    <h1>组件B</h1>
    {{ msgB }}
  </div>
</template>

<script>
export default {
  name: &#39;ChildB&#39;,
  data() {
    return {
      msgB: null
    }
  },
  mounted() {
    this.msgB = this.$attrs
    console.log(&#39;组件B获取的$listeners:&#39;, this.$listeners)
  }
}
</script>

// 孙组件B
export default {
  name: 'ChildB',
  inheritAttrs: false,
  data() {
    return {
      msgB: null
    }
  },
  mounted() {
    this.msgB = this.$attrs
    console.log('组件B获取的$listeners:', this.$listeners)
  }
}

🎜 4. provide/inject🎜🎜Le composant ancêtre passe par provide Les composants descendants injectent des variables via inject. code> pour obtenir les données des composants ancêtres. Quelle que soit la profondeur d'imbrication des composants descendants, tant que inject est appelé, les données fournies peuvent être injectées. Voici le code spécifique : 🎜

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <hr>
    <childa></childa>
    <hr>
    <childb></childb>
  </div>
</template>

<script>
import ChildA from &#39;./components/ChildA&#39;
import ChildB from &#39;./components/ChildB&#39;

export default {
  name: &#39;parent&#39;,
  components: {
    ChildA,
    ChildB
  }
}
</script>

// 子组件A
<template>
  <div>
    <h1>组件A</h1>
    <p>A获取的值: {{ count }}</p>
    <button>ChildA-add</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    // 改变store里count的值
    add(num) {
      this.$store.dispatch(&#39;countAdd&#39;, num)
    }
  }
}
</script>

<style>

</style>

// 子组件B
<template>
  <div>
    <h1>组件B</h1>
    <p>B获取的值: {{ countB }}</p>
    <button>ChildB-add</button>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from &#39;Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants&#39;
export default {
  computed: {
    ...mapGetters({
      countB: &#39;getCount&#39;
    })
  },
  methods: {
    ...mapMutations([&#39;countAdd&#39;]),
    // 改变store里count的值
    add(num) {
      this.countAdd(num)
    }
  }
}
</script>

<style>

</style>

🎜

fournir et injecter pour transmettre des valeurs

🎜Remarque : fournir/injecter ne peut transmettre des valeurs que de haut en bas et n'est pas réactif si vous le souhaitez. pour devenir un fournisseur de données réactif, les fonctions doivent être fournies🎜🎜5. &dollar;emit/$on de eventBus🎜🎜eventBus est une méthode. de transmission des messages, basé sur un centre de messages, le modèle d'abonnement et de publication des messages est appelé modèle de publication-abonné. 🎜eventBus est également appelé bus événementiel. Dans Vue, eventBus peut être utilisé comme concept de pont de communication. C'est comme si tous les composants partageaient le même centre d'événements et pouvaient s'enregistrer pour envoyer ou recevoir des événements au centre, afin que les composants puissent notifier d'autres composants en parallèle de haut en bas. 🎜

$emit('name',args): name:发布的消息名称， args：发布的消息
$on('name',fn): name:订阅的消息名称， fn: 订阅的消息
&dollar;once('name',fn): name:订阅的消息名称， fn: 订阅的消息。与$on相似但是只触发一次，一旦触发之后，监听器就会被移除
&dollar;off('name',callback):name:事件名称，callback:回调监听器
eventbus可以实现任何组件之前的通信，下面以兄弟组件为例

1、初始化，全局引入

// main.js
// 全局添加事件总线
Vue.prototype.$bus = new Vue()

2、发送事件

在parent.vue引入ChildA和ChildB组件，使它们成为兄弟组件

// 父组件parent.vue
<template>
  <div>
    <childa></childa>
    <childb></childb>
  </div>
</template>

<script>
import ChildA from &#39;./components/childA&#39;
import ChildB from &#39;./components/childB&#39;
export default {
  components: {
    ChildA,
    ChildB
  }
}
</script>

在ChildA组件中用$emit发送事件

// ChildA组件
<template>
  <div>
    <h1>组件A</h1>
    <button>发送</button>
  </div>
</template>

<script>
export default {
  methods: {
    // 发送事件
    send() {
      this.$bus.$emit(&#39;message&#39;, &#39;欢迎使用eventBus!&#39;)
    }
  }
}
</script>

3、接收事件发送的事件

在ChildB组件中用$on接收ChildA发送的事件

// ChildB组件
<template>
  <div>
    <h1>组件B</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // 接收事件
    this.$bus.$on(&#39;message&#39;, data => {
      alert(&#39;我是组件B，我收到的消息为：&#39; + data)
    })
  },
  beforeDestroy() {
    this.$bus.$off(&#39;message&#39;)
  }
}
</script>

注意：&dollar;on监听的事件不会自动移除监听，因此在不用时最好使用$off移除监听以免产生问题

六、`&dollar;attrs`/`$listeners`

1、简介

当组件为两级嵌套时，一般采用props和&dollar;emit，但遇到多级组件嵌套时这种方法就不太适用了，如果不做中间处理，只传递数据用Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants有点大材小用了。因此在vue2.4中为了解决这一需求，便引入了&dollar;attrs和$listeners，新增了inheritAttrs属性

&dollar;attrs：当父组件传递了很多数据给子组件时，子组件没有声明props来进行接收，么子组件中的attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)；子组件还可以使用v−bind="$attrs"的形式将所有父组件传来的数据(除开已经props声明了的)传向下一级子组件,通常和interitAttrs属性一起使用。
&dollar;listeners：包含了父组件中(不含.native修饰器的)v-on 事件监听器，通过v-on="$listeners"，可以将这些事件绑定给它自己的子组件

2、实例

下面看一个例子：

// 父组件
<template>
  <div>
    <childa></childa>
  </div>
</template>

<script>
import ChildA from &#39;./components/childA&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    ChildA,
  },
  data() {
    return {
      name: &#39;小明&#39;,
      age: 18,
      sex: &#39;男&#39;
    }
  },
  methods: {
    // 获取名字
    getName() {
      console.log(&#39;我的名字是&#39; + this.name)
    },
    // 获取年龄
    getAge() {
      console.log(&#39;我今年&#39; + this.age + &#39;岁&#39;);
    }
  }
}
</script>

// 子组件A
<template>
  <div>
    <h1>组件A</h1>
    {{ msgA }}
    <hr>
    <childb></childb>
  </div>
</template>

<script>
import ChildB from &#39;./childB.vue&#39;
export default {
  name: &#39;ChildA&#39;,
  components: {
    ChildB
  },
  data() {
    return {
      msgA: null,
      height: &#39;175cm&#39;
    }
  },
  props: {
    sex: {
      type: String,
      default: &#39;&#39;
    }
  },
  mounted() {
    this.msgA = this.$attrs
    console.log(&#39;组件A获取的$listeners:&#39;, this.$listeners)
  },
  methods: {
    // 获取身高
    getHeight() {
      console.log(&#39;我的身高是&#39; + this.height);
    }
  }
}
</script>

// 孙组件B
<template>
  <div>
    <h1>组件B</h1>
    {{ msgB }}
  </div>
</template>

<script>
export default {
  name: &#39;ChildB&#39;,
  data() {
    return {
      msgB: null
    }
  },
  mounted() {
    this.msgB = this.$attrs
    console.log(&#39;组件B获取的$listeners:&#39;, this.$listeners)
  }
}
</script>

$attrs获取的结果：
Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants
$listeners获取的结果：

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

如代码和图所示组件A中props声明接收了sex属性，因此组件中&dollar;attrs获取的是父组件中绑定的除去sex属性的值；组件A中使用了v-bind="&dollar;attrs"和v-on="$listeners"，则组件B获取不仅是组件A中本身绑定的属性和方法还包含组件A获取父组件绑定的属性和方法

3、inheritAttrs

如果父组件传递了很多参数给子组件，而子组件没有用props完全接收，那么没有接收的这些属性作为普通的 HTML attribute 应用在子组件的根元素上
如果你不希望子组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false

以上面的组件B为例，当Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants（inheritAttrs默认为true）

当Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

// 孙组件B
export default {
  name: 'ChildB',
  inheritAttrs: false,
  data() {
    return {
      msgB: null
    }
  },
  mounted() {
    this.msgB = this.$attrs
    console.log('组件B获取的$listeners:', this.$listeners)
  }
}

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

七、`Vuex`

1、Vuex概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态管理包含以下几个部分：
Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

状态（State），驱动应用的数据源
视图（View），以声明方式将状态映射到视图；
操作（Actions），响应在视图上的用户输入导致的状态变化

视图发生变化会导致数据源的改变，数据源发生变化则会改变视图，则上面表示是一个“单向数据流”。但是当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

因此，为了解决这种问题我们把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

2、 Vuex各个模块

1、state：存储应用中需要共享的状态，是Vuex中的唯一数据源。
2、getters:类似Vue中的计算属性computed，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3、mutations:更改 Vuex 的 store 中的状态(state)的唯一方法，且mutation 必须是同步函数
4、actions：类似于 mutation，提交的是 mutation，而不是直接变更状态；可以包含任意异步操作
5、modules：将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

3、Vuex举例

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <hr>
    <childa></childa>
    <hr>
    <childb></childb>
  </div>
</template>

<script>
import ChildA from &#39;./components/ChildA&#39;
import ChildB from &#39;./components/ChildB&#39;

export default {
  name: &#39;parent&#39;,
  components: {
    ChildA,
    ChildB
  }
}
</script>

// 子组件A
<template>
  <div>
    <h1>组件A</h1>
    <p>A获取的值: {{ count }}</p>
    <button>ChildA-add</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    // 改变store里count的值
    add(num) {
      this.$store.dispatch(&#39;countAdd&#39;, num)
    }
  }
}
</script>

<style>

</style>

// 子组件B
<template>
  <div>
    <h1>组件B</h1>
    <p>B获取的值: {{ countB }}</p>
    <button>ChildB-add</button>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from &#39;Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants&#39;
export default {
  computed: {
    ...mapGetters({
      countB: &#39;getCount&#39;
    })
  },
  methods: {
    ...mapMutations([&#39;countAdd&#39;]),
    // 改变store里count的值
    add(num) {
      this.countAdd(num)
    }
  }
}
</script>

<style>

</style>

store.js

import Vue from 'vue'
import Vuex from 'Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    getCount: (state) => {
      return state.count
    }
  },
  mutations: {
    countAdd(state, num) {
      state.count += num
    }
  },
  actions: {
    countAdd(context, num) {
      context.commit('countAdd', num)
    }
  },
  modules: {
  }
})

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

八、`localStorage`/`sessionStorage`

1、介绍

localStorage：本地存储对象，存储的数据是永久性数据,页面刷新，即使浏览器重启，除非主动删除不然存储的数据会一直存在
sessionStorage：与localStorage相似，但是只有在当前页面下有效，关闭页面或浏览器存储的数据将会清空

localStorage和sessionStorage常用的API：

setItem (key, value) ——  保存数据，以键值对的方式储存信息。
getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
clear () ——  删除所有的数据
key (index) —— 获取某个索引的key

2、举例

// 存储
setItem() {
  window.localStorage.setItem('name1', '小明')
  window.sessionStorage.setItem('name2', '小红')
}

// 接收
receive() {
  const name1 = window.localStorage.getItem('name1')
  const name2 = window.sessionStorage.getItem('name2')
  console.log(name1) // 打印结果为：小明
  console.log(name2) // 打印结果为：小红
}

3、setItem()和getItem()使用时的类型转换

localStorage和sessionStorage通过setItem()存储数据会自动转换为String类型，但是通过getItem()其类型并不会转换回来（localStorage和sessionStorage使用方法一样，下面均以localStorage为例）

const num = 1
window.localStorage.setItem('num', num)

const numRec = window.localStorage.getItem('num')
console.log(numRec, typeof(numRec)) // 1 string

因此正确的存储方式应该为：存储之前用JSON.stringify()方法将数据转换成json字符串形式；需要使用数据的时候用JSON.parse()方法将之前存储的字符串转换成json对象

const num = 1
window.localStorage.setItem('num', JSON.stringify(num))
const obj = {
   name: '小红',
   age: 18
 }
window.localStorage.setItem('obj', JSON.stringify(obj))

const numRec = JSON.parse(window.localStorage.getItem('num'))
console.log(numRec, typeof(numRec)) // 1 'number'
const objRec = JSON.parse(window.localStorage.getItem('obj'))
console.log(objRec, typeof(objRec)) // {name: '小红', age: 18} 'object'

注意：localStorage.setItem()和sessionStorage.setItem()不能直接存储对象，必须使用JSON.stringify()和JSON.parse()转换实现

总结

以上8种通信方式主要应用在以下三类场景：

Communication entre composants parent-enfant : La méthode de communication la plus couramment utilisée est props/&dollar;emit. Un seul composant parent-enfant communique en utilisant &dollar; parent> code>/<code>&dollar;children est également plus pratique ; les composants parents utilisent souvent ref pour obtenir des instances de composants enfants, vous pouvez également utiliser provide ; code>/<code> injecter, &dollar;attrs/&dollar;listeners et localStorage/sessionStorageprops/&dollar;emit，单一的父子组件通信使用&dollar;parent>/&dollar;children也比较方便；父组件也常使用ref获取子组件实例；也可使用provide/inject、&dollar;attrs/&dollar;listeners以及localStorage/sessionStorage
兄弟组件通信：简单的数据传递可使用eventBus的&dollar;emit/&dollar;on；复杂的数据使用Vuex比较方便;也可以使用localStorage/sessionStorage;
跨级组件通信：父子孙等嵌套组件通信方式多使用provide/inject和&dollar;attrs/&dollar;listeners；跨级组件通信的数据如果不复杂可使用eventBus和localStorage/sessionStorage；如果数据复杂可使用Vuex

composants frères et sœurs Communication :

Le transfert de données simple peut utiliser les données complexes `&dollar;emit`/`&dollar;on` de `eventBus` ; Le `Vuex` code> est plus pratique ; vous pouvez également utiliser `localStorage`/`sessionStorage`

Communication entre composants :

Parents, enfants et d'autres méthodes de communication de composants imbriqués utilisent principalement provide/<code>inject et &dollar;attrs/&dollar;listeners ; la communication entre les composants inter-niveaux n'est pas complexe, eventBus peut être utilisé et localStorage/sessionStorage si les données sont complexes, vous pouvez utiliser Vuex, mais sachez que les données stockées dans Vuex disparaîtront lorsque vous actualiserez l'interface Fin

Cet article enregistre simplement les méthodes de communication des composants couramment utilisées et n'en présente pas les détails en profondeur. S'il y a des erreurs, veuillez me corriger🎜🎜 (Partage de vidéos d'apprentissage : 🎜Développement web front-end🎜, 🎜Vidéo de programmation de base🎜)🎜

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Plus de 20 bibliothèques de composants Vue pratiques, venez les récupérer !Article suivant：Plus de 20 bibliothèques de composants Vue pratiques, venez les récupérer !

Articles Liés

Voir plus

Comment communiquer entre les composants Vue ? Plusieurs modes de communication des composants

Méthode de communication

1. props/$emitprops/$emit

1、父组件向子组件传值

2、子组件向父组件传值

二、&dollar;parent/$children

三、ref

四、provide/inject

五、eventBus的&dollar;emit/$on

🎜1. Le composant parent transmet la valeur au composant enfant🎜

1、初始化，全局引入

2、发送事件

3、接收事件发送的事件

六、&dollar;attrs/$listeners

1、简介

2、实例

3、inheritAttrs

七、Vuex

1、Vuex概述

2、 Vuex各个模块

3、Vuex举例

八、localStorage/sessionStorage

1、介绍

2、举例

3、setItem()和getItem()使用时的类型转换

总结

Le transfert de données simple peut utiliser les données complexes &dollar;emit/&dollar;on de eventBus ; Le Vuex code> est plus pratique ; vous pouvez également utiliser localStorage/sessionStorage

Articles Liés

1. `props`/`$emitprops`/`$emit`

二、`&dollar;parent`/`$children`

三、`ref`

四、`provide`/`inject`

五、`eventBus`的`&dollar;emit`/`$on`

六、`&dollar;attrs`/`$listeners`

七、`Vuex`

八、`localStorage`/`sessionStorage`

Le transfert de données simple peut utiliser les données complexes `&dollar;emit`/`&dollar;on` de `eventBus` ; Le `Vuex` code> est plus pratique ; vous pouvez également utiliser `localStorage`/`sessionStorage`