Quelles sont les méthodes pour transmettre des valeurs dans les composants vue ?

Méthode de transfert de valeur du composant Vue : 1. Utilisez des accessoires pour transférer la valeur du parent à l'enfant ; 2. Utilisez "$emit" pour transférer la valeur de l'enfant au parent 3. Utilisez EventBus ou Vuex pour transférer la valeur aux frères ; ; 4. Utiliser Les méthodes "provide/inject" ou "$attrs/$listeners" effectuent un transfert de valeur entre niveaux.

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

Nous savons tous que Vue est un framework front-end léger, et son cœur est le développement de composants. Vue est composée de composants un par un. La composantisation est son essence et l'une de ses fonctions les plus puissantes. Les portées des instances de composants sont indépendantes les unes des autres, ce qui signifie que les données entre différents composants ne peuvent pas se référencer mutuellement.

Mais dans le processus de développement du projet lui-même, nous devons accéder aux données d'autres composants, il y a donc un problème de communication entre les composants. Les relations entre les composants de Vue sont : père-fils, frère et générationnel. Comment mettre en œuvre le transfert de données pour différentes relations est ce dont nous parlerons ensuite.

1. Le composant parent transmet la valeur au composant enfant

C'est-à-dire que le composant parent transmet la valeur au composant enfant via des attributs, et le Le composant enfant transmet les accessoires à recevoir.

• Lier les propriétés personnalisées dans la balise du composant enfant du composant parent

• // 父组件
  <user-detail :myName="name" />
      
  export default {
      components: {
          UserDetail
      }
      ......
  }

• Utilisez simplement des accessoires (peut être un tableau ou un objet) dans le composant enfant pour le recevoir. Plusieurs attributs peuvent être transmis.

• // 子组件
  export default {
      props: ['myName']
  }
  
  /*
  props: { myName: String } //这样指定传入的类型，如果类型不对会警告
  props: { myName: [String, Number] } // 多个可能的类型
  prosp: { myName: { type: String, requires: true } } //必填的的字符串
  props: { 
      childMsg: { 
          type: Array, 
          default: () => [] 
      }
  }  // default指定默认值
  如果 props 验证失败，会在控制台发出一个警告。
  */

La valeur du composant parent reçue par le composant enfant est divisée en deux types : type référence et type ordinaire :

Types courants : Chaîne, Nombre, Booléen, Null

Types de référence : Tableau, Objet (Objet)

Basé sur le flux de données unidirectionnel de vue, c'est-à-dire que les données entre les composants circulent dans une direction et que les composants enfants ne sont pas autorisés à accéder directement aux composants parents. La valeur transmise est modifiée, donc cette opération est directement effectuée. il faut éviter de modifier la valeur transmise par le composant parent, sinon la console signalera une erreur.

• Si la valeur transmise est un type de données simple, elle peut être modifiée dans le composant enfant et n'affectera pas les autres composants frères qui appellent également le même données du parent. La valeur du composant.

  L'opération spécifique consiste d'abord à réaffecter la valeur transmise à une variable dans les données, puis à modifier cette variable .

• // 子组件
  export default {
      props: ['myName'],
      data() {
          return {
              name : this.myName    // 把传过来的值赋值给新的变量
          }
      },
      watch: {
          myName(newVal) {
              this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
          }
      },
      methods: {
          changeName() {  
              this.name = 'Lily'  // 这里修改的只是自己内部的值，就不会报错了
          },
      }
  }

  Remarque : Si watch n'est pas utilisé pour surveiller la valeur myName transmise par le composant parent, la valeur name dans le composant enfant est Il ne changera pas avec la valeur myName du composant parent, car name: this.myName dans les données ne définit qu'une valeur initiale.

• Si la valeur du type référence est modifiée dans le composant enfant, le composant parent sera également modifié car les données sont publiques et sont également référencées par d'autres . Les sous-composants de la valeur seront également modifiés en conséquence. On comprend que la valeur transmise par le composant parent au composant enfant équivaut à faire une copie. Le pointeur de cette copie pointe toujours vers celui du composant parent, c'est-à-dire qu'il partage la même référence. Donc, sauf besoins particuliers, ne le modifiez pas facilement.

2. Le sous-composant transmet la valeur au composant parent

1. event , déclenchez

via this.$emit(). Liez un événement dans le composant enfant et définissez une fonction pour cet événement

// 子组件
a06555d3f9bc1acdc3ad873256d98d56改变父组件的name65281c5ac262bf6d81768915a4a77ac0

export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

Défini dans le composant parent. Et liez l'événement handleChange

// 父组件
07641efda433f8c7133a4cfdcc3be7e37d4dd9c7239aac360e401efe89cbb393

methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

2. Grâce à la fonction de rappel

définissez d'abord une fonction de rappel dans le composant parent et transmettez-y la fonction de rappel

// 父组件
75a731d8f89d34d432d15a53f1e4455b7d4dd9c7239aac360e401efe89cbb393
methods: {
    callback: function(name) {        this.name = name
    }
}

est reçu dans le composant enfant et exécute la fonction de rappel

// 子组件
2cea546566374ab655a087de52a59050改变父组件的name65281c5ac262bf6d81768915a4a77ac0
props: {
    callback: Function,
}

3 Accédez à l'instance du composant via $parent / $children ou $refs

.

Les deux obtiennent directement l'instance du composant. Après utilisation, vous pouvez directement appeler la méthode du composant ou accéder aux données.

// 子组件
export default {
  data () {
    return {
      title: '子组件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}

rrree

Remarque : la communication entre les composants de cette manière ne peut pas être multi-niveaux.

4. $attrs / $listeners Cliquez ici pour plus de détails

三、兄弟组件之间传值

1、还是通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
17fea1a7602fd91b427ad17979409c59
760952284b32fe2031f519d27b0e25d2  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
e388a4556c0f65e1904146cc1a846bee姓名：{{ myName }}94b3e26ee717c64999d7867364b1b4a3
023898c17fc87db1696b47c8a39290f3修改姓名65281c5ac262bf6d81768915a4a77ac0
    
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

// child-a 组件
e388a4556c0f65e1904146cc1a846bee姓名：{{ newName }}94b3e26ee717c64999d7867364b1b4a3
    
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。

2. 通过一个空 vue 实例

创建一个 EventBus.js 文件，并暴露一个 vue 实例

import Vue from 'Vue'export default new Vue()

在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数

(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)

d477f9ce7bf77f53fbcf36bec1b69b7a
    dc6dce4a544fdca2df29d5ac0ea9906b
        e388a4556c0f65e1904146cc1a846bee姓名: {{ name }}94b3e26ee717c64999d7867364b1b4a3
        023898c17fc87db1696b47c8a39290f3修改姓名65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { EventBus } from "../EventBus.js"

export default {
 data() {
     return {
         name: 'John',
     }
  },
  methods: {
      changeName() {
          this.name = 'Lily'
          EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
      }
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数

import { EventBus } from "../EventBus.js"

export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。

3. 使用 vuex →点这里

四、多层父子组件通信

有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。

这时就需要用到 vue 提供的更高阶的方法：provide/inject。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。查 看 官 网

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。

父组件：

export default {
  provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
    name: 'Jack'
  }
}

子组件：

export default {
  inject: ['name'], // 注入了从父组件中提供的name变量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。

如果想要实现 provide 和 inject 数据响应，有两种方法：

• provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在后代组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods

// 父组件　
dc6dce4a544fdca2df29d5ac0ea9906b
      023898c17fc87db1696b47c8a39290f3修改姓名65281c5ac262bf6d81768915a4a77ac0
      f6e50660328b0f8ee98e871de7e92ca3
16b28748ea4df4d9c2150843fecfba68
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    ......
    data() {
        return {
            name: "Jack"
        };
    },
    provide() {
        return {
            parentObj: this //提供祖先组件的实例
        };
    },
    methods: {
        changeName() {
            this.name = 'Lily'
        }
    }
2cacc6d41bbb37262a98f745aa00fbf0

后代组件中取值：　　

d477f9ce7bf77f53fbcf36bec1b69b7a
　　3f6cd53913cdb5cc95b1ed83851f3420
　　　　64e5601d0a941f4972a2954192bdae18姓名：{{parentObj.name}}ee2bfd64228f824cf6027e0da2815b78
　　16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
　　export default {
　　　　inject: {
　　　　　　parentObj: {
　　　　　　　　default: () => ({})
　　　　　　}
　　　　} // 或者inject: ['parentObj']
　　};
2cacc6d41bbb37262a98f745aa00fbf0

注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。

• 使用 Vue.observable 优化响应式 provide，这个我用的不熟就不说了，可以 → 官方文档

 总结

• 父子通信：父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；

• 兄弟通信： EventBus；Vuex；

• 跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；

相关推荐：《vue.js教程》

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!