Quelles sont les trois façons de transmettre des valeurs dans Vue ?

Vue dispose de trois méthodes de transmission de valeurs : 1. "Père à enfant" ; le composant parent envoie des données (transmission de valeurs) au composant enfant via prop. 2. « Fils au parent » ; le composant enfant envoie des messages au composant parent via des « événements ». 3. « Transfert de valeurs non parent-enfant » ; un fichier d'instance public commun « bus.js » doit être défini entre les composants non parent-enfant pour servir d'entrepôt intermédiaire pour transférer les valeurs.

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

Trois méthodes de transmission de valeurs couramment utilisées dans Vue :

• Père à fils

• Fils à père

• Transmission de valeurs non parent-enfant

Qu note du site officiel : Composants parent-enfant La relation peut être résumée lorsque les accessoires sont transmis vers le bas et les événements vers le haut. Le composant parent envoie des données au composant enfant via des accessoires, et le composant enfant envoie des messages au composant parent via des événements.

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

Composant parent :

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
 import child from &#39;./child&#39;
 export default {
    components: {
      child
    },
    data () {
      return {
        name: &#39;&#39;
      }
    }
  }
</script>

Composant enfant :

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

2. Composant :

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: &#39;我是子组件的数据&#39;
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit(&#39;childByValue&#39;, this.childValue)
      }
    }
  }
</script>

3. Transfert de valeurs entre les composants non parents et enfants :

Pour transférer des valeurs entre les composants non parents et enfants, vous devez définir un fichier d'instance public public bus.js comme intermédiaire. entrepôt pour transférer les valeurs, sinon les composants d'acheminement L'effet du transfert de valeur ne peut pas être obtenu.

Public bus.js

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from &#39;./child&#39;
  export default {
    components: {
      child
    },
    data () {
      return {
        name: &#39;&#39;
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

Composant A :

//bus.js
import Vue from 'vue'
export default new Vue()

Composant B :

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from &#39;./bus.js&#39;
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit(&#39;val&#39;, this.elementValue)
      }
    }
  }
</script>

Recommandations associées : "

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!