Heim > Web-Frontend > js-Tutorial > Hauptteil

Drei häufig verwendete Wertübertragungsmethoden in Vue

不言
Freigeben: 2018-07-23 10:56:25
Original
2502 Leute haben es durchsucht

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>
Nach dem Login kopieren

Untergeordnete Komponente:

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

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>
Nach dem Login kopieren

Ü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>
Nach dem Login kopieren

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()
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage