Welche Möglichkeiten gibt es, Werte in Vue zu übergeben?

Vues Wertübertragungsmethoden umfassen: 1. Requisiten werden nach unten und Ereignisse nach oben weitergeleitet; 2. untergeordnete Komponenten lösen benutzerdefinierte Ereignisse von übergeordneten Komponenten durch $emit aus; 3. Übertragung zwischen nicht übergeordneten und untergeordneten Komponenten durch Definieren öffentlicher Instanzdateiwerte .

Die Betriebsumgebung dieses Artikels: Windows7-System, Vue-Version 2.5.17, DELL G3-Computer.

? Requisiten werden nach unten und Ereignisse nach oben weitergegeben. Die übergeordnete Komponente sendet Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente.

Übergeordnete Komponente:

<template>
  <p>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>  //child子组件通过 :inputName="name" 将值传过去
  </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>

Vom Sohn zum Elternteil

Untergeordnete Komponenten können über $emit benutzerdefinierte Ereignisse der übergeordneten Komponente auslösen. vm.$emit(event,arg) wird verwendet, um Ereignisse auf der aktuellen Instanz auszulösen Nicht-übergeordnete und untergeordnete Komponenten müssen eine öffentliche öffentliche Instanzdatei bus.js als Zwischenlager für die Werteübertragung definieren, andernfalls wird der Wertübertragungseffekt zwischen Routing-Komponenten nicht erreicht.

Public bus.js

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

Komponente A:

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

Komponente B:

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

Verwandte Empfehlungen: „vue.js-Tutorial“ „

Die neuesten 5 vue.js-Video-Tutorial-Auswahlen

“

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Werte in Vue zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!