Drei häufig verwendete Wertübertragungsmethoden in Vue

Dieser Artikel teilt Ihnen die drei häufig verwendeten Methoden zur Wertübertragung in Vue mit. Er hat einen gewissen Referenzwert.

1. Übergeordnete Komponente übergibt Wert an untergeordnete Komponente:

Übergeordnete Komponente:

        <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>

Untergeordnete Komponente:

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

2. Untergeordnete Komponente übergibt Wert an übergeordnete Komponente

Untergeordnete Komponente:

       <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>

Übergeordnete Komponente:

  <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. (Um Werte zwischen nicht übergeordneten und untergeordneten Komponenten zu übertragen, müssen Sie eine öffentliche öffentliche Instanzdatei bus.js als Zwischenlager für die Werteübertragung definieren, da sonst der Wertübertragungseffekt zwischen Routing-Komponenten nicht erreicht wird.)

Öffentlicher Bus .js

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

Komponente 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>

Verwandte Empfehlungen:

Detaillierte Einführung in Hook-Funktionen in Vue

Detaillierte Analyse der benutzerdefinierten Vue-Anweisungen und Anweisungsdefinitionsfunktionen (Code)

Das obige ist der detaillierte Inhalt vonDrei häufig verwendete Wertübertragungsmethoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!