Trois méthodes de transfert de valeur couramment utilisées dans Vue

Cet article partage avec vous les trois méthodes de transfert de valeur couramment utilisées dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

Composant parent :

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

Composant enfant :

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

2. Le composant enfant transmet la valeur au composant parent

Composant enfant :

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

Composant parent :

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

3. -child Le composant transmet la valeur. (Pour transférer des valeurs entre les composants non parents et enfants, vous devez définir un fichier d'instance public bus.js comme entrepôt intermédiaire pour transférer les valeurs, sinon l'effet de transfert de valeur entre les composants de routage ne sera pas obtenu.)

Bus public .js

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

Composant A :

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




组件B：
    <template>
      <p>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{{name}}</span>
      </p>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0
          }
        },
        mounted: function () {
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }
    </script>

Recommandations associées :

Introduction détaillée aux fonctions de hook dans Vue

Analyse détaillée des instructions personnalisées Vue et des fonctions de définition d'instructions (code)

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!