Quelles sont les différentes manières de transmettre des valeurs dans les composants vue ?

Méthode de transfert de valeur de composant : 1. Transférer la valeur via le routage ; 2. En liant l'étiquette du sous-composant dans le composant parent aux données du composant parent, les accessoires du sous-composant reçoivent la valeur transmise par le composant parent. , et les accessoires du sous-composant reçoivent La valeur transmise par le composant parent ; 3. Le composant enfant transmet la valeur au composant parent et utilise "this.$emit" pour parcourir l'événement getData.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

1. Paramètres de routage

Étapes :

①Ajoutez le paramètre props: true lors de la définition de l'itinéraire, et laissez des espaces réservés aux paramètres lors de la définition du chemin de routage : nom『Utilisation : to="'path/'＋value"』props: true，在定义路由路径时要留有参数占位符: name『用法:to="'路径/'＋value"』

②在跳转到的页面加上参数props:['name']

③在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{<!-- -->{ name}}』

2、父组件向子组件传值

父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值即可

步骤：

①父组件内设置要传的数据『data(){ parentid: value}』

②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『 mybtn>』

③在子组件添加参数props:['childid'],即可

代码：

<div id="app">
	<mybtn :childid=&#39;parentid&#39; title="我是标题"></mybtn>
</div>
<script>
	new Vue({
		el:"app",
		data:{
			parentid:"88888"
		},
		components:{
			"mybtn" : {
				props: [&#39;childid&#39;,&#39;title&#39;],
	  			template: &#39;<button>我是{{childid}}号按钮{{title}}</button>&#39;
			}
		}
	})
</script>

结果展示：

3、子组件向父组件传值

子传父的实现方式就是用了 this.e m i t 来遍历 getData 事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg

步骤：

①由于父组件需要参数，所以在父组件中的标签上定义自定义事件，在事件内部获取参数；『@myEvent=" callback"在callback函数中接收参数』

②在子组件中触发自定义事件，并传参。『this.$emit('父组件中的自定义事件',参数)』

代码：

<template>
  <div>
	  <mybtn :style="{color:acolor,background:bcolor}" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn>
  </div>

</template>
<script>

  export default {
    name : &#39;test&#39;,
    data () {
      return {
        childid:"666",
        acolor:&#39;blue&#39;,
        bcolor:&#39;red&#39;
      }
    },
    methods:{
      getColor(colors){
        //父组件就可以拿到子组件传过来的colors
        console.log(colors)
        this.acolor = "white";
        this.bcolor = colors;
      },
      //接收多个参数
      /*getColor(colors1,colors2){
        console.log(colors1,colors2)
        this.acolor = colors2;
        this.bcolor = colors1;
      }*/
    },
    components: {
      &#39;mybtn&#39; : {
        props : [&#39;parentid&#39;,&#39;title&#39;],
        template : `
          <div class="box">
            <p>我最初是一张白纸</p>
            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button>
          </div>
        `,
        methods: {
          changeColor(){
          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数
           this.$emit(&#39;changeColorEvent&#39;,"orange")
           //发送多个参数可以直接跟在后面
           //this.$emit(&#39;changeColorEvent&#39;,"orange","white")
          }
        }
      }
    }
  }
</script>
<style scoped>

</style>

4、非父组件之间传值

步骤：

(1)方法一、

①建立一个公共的通信组件(Vue)，需要传值的组件里引入该通信组件

②在一个中绑定一个事件this.on('eventname', this. id)

③在另一个组件中触发事件this.$ emit('eventname',( options)=>{})

②Ajoutez des paramètres à la page à laquelle vous accédez props :['name']

③ Le nom est obtenu dans le page à laquelle accéder. Utilisation : directement this.name en js ; interpolation directe en html {<!-- -->{ name}} 』

2 . Le composant parent transmet la valeur au composant enfant

🎜🎜Le composant parent transmet la valeur au composant enfant en liant la balise du composant enfant aux données du composant parent, et les accessoires du composant enfant reçoivent les accessoires du composant parent. la valeur🎜
🎜🎜🎜🎜Étapes :🎜🎜🎜①Définissez les données à transmettre dans le composant parent 『data(){ parentid: value}』🎜🎜②Dans le composant parent Bind un attribut personnalisé au sous-composant référencé dans le composant et liez les données à l'attribut personnalisé " mybtn>"🎜🎜 ③Ajoutez le paramètre props:['childid'] dans le sous-composant, puis 🎜🎜🎜Code : 🎜🎜rrreee🎜🎜Affichage du résultat : 🎜🎜🎜🎜🎜🎜🎜3. Le composant enfant transmet la valeur au composant parent🎜🎜🎜🎜Sub-pass La méthode d'implémentation parent consiste à utiliser this.e m i t pour parcourir l'événement getData. Utilisez d'abord le bouton pour déclencher l'événement setData, utilisez this.emit dans setData pour parcourir l'événement getData, et enfin renvoyez this.msg🎜🎜🎜Steps:🎜🎜🎜① Puisque le composant parent nécessite des paramètres, définissez un événement personnalisé sur l'étiquette dans le composant parent et obtenez les paramètres à l'intérieur de l'événement 『🎜@myEvent=" callback"Recevoir les paramètres dans la fonction de rappel　🎜
🎜🎜②Déclenchez des événements personnalisés dans les composants enfants et transmettez les paramètres. 『this.$emit('Événement personnalisé dans le composant parent', paramètres)』🎜🎜🎜Code : 🎜🎜rrreee🎜🎜🎜🎜🎜4. Passage de valeurs entre composants non parents🎜🎜🎜🎜🎜Étapes :🎜🎜 🎜(1 ) Méthode 1, 🎜🎜① Créez un composant de communication publique (Vue), et introduisez le composant de communication dans le composant qui doit transmettre la valeur 🎜🎜② Lier un événement dans this.on ('eventname', this. id)🎜🎜③Déclenchez l'événement dans un autre composant this.$ submit('eventname',( options)=>{})🎜🎜 (2 ) Deuxième méthode, 🎜🎜Ajouter des données publiques dans le stockage local, qui peuvent être obtenues et modifiées sur deux pages🎜🎜[Recommandation associée : "🎜Tutoriel 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!