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

Vue verfügt über drei Methoden zur Wertübergabe: 1. „Vater an Kind“; die übergeordnete Komponente sendet Daten (Wertübergabe) über prop an die untergeordnete Komponente. 2. „Sohn an Eltern“; die untergeordnete Komponente sendet über „Ereignisse“ Nachrichten an die übergeordnete Komponente. 3. „Nicht-übergeordnete-untergeordnete Werteübertragung“; eine gemeinsame öffentliche Instanzdatei „bus.js“ muss zwischen Nicht-übergeordneten-untergeordneten Komponenten definiert werden, um als Zwischenlager für die Übertragung von Werten zu dienen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Drei häufig verwendete Methoden zur Wertübergabe in Vue:

• Vater an Sohn

• Sohn an Vater

• Nicht-Eltern-Kind-Wertweitergabe

Zitat aus dem Offizielle Website: Eltern-Kind-Komponenten Die Beziehung kann so zusammengefasst werden, dass Requisiten nach unten und Ereignisse nach oben weitergegeben werden. Die übergeordnete Komponente sendet Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente.

1. Komponente:

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

3. Wertübertragung zwischen nicht-übergeordneten und untergeordneten Komponenten:

Um Werte zwischen nicht-übergeordneten und untergeordneten Komponenten zu übertragen, müssen Sie eine öffentliche öffentliche Instanzdatei bus.js als Zwischenprodukt definieren Lager zum Übertragen von Werten, andernfalls Routing-Komponenten Der Effekt der Wertübertragung kann nicht erreicht werden.

Public bus.js

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

Komponente A:

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

Komponente B:

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

Verwandte Empfehlungen: „vue.js Tutorial

“

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