Apakah tiga cara untuk menghantar nilai dalam Vue?

Vue mempunyai tiga cara untuk menghantar nilai: 1. "Pass daripada ibu bapa kepada anak"; 2. "Anak kepada ibu bapa"; komponen anak menghantar mesej kepada komponen induk melalui "acara". 3. "Pemindahan nilai bukan ibu bapa-anak"; fail contoh awam biasa "bus.js" perlu ditakrifkan antara komponen bukan ibu bapa-anak untuk berfungsi sebagai gudang perantaraan untuk memindahkan nilai.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Tiga kaedah lulus nilai yang biasa digunakan dalam Vue:

• Bapa kepada anak lelaki

• Anak kepada bapa

• Bukan ibu bapa kepada anak untuk lulus nilai

Memetik ayat dari laman web rasmi: Hubungan antara komponen ibu bapa dan anak boleh diringkaskan apabila Props diturunkan dan peristiwa diserahkan. Komponen induk menghantar data kepada komponen anak melalui prop, dan komponen anak menghantar mesej kepada komponen induk melalui acara.

1. Komponen induk menghantar nilai kepada komponen anak:

Komponen induk:

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

Komponen anak:

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

2. Subkomponen menghantar nilai kepada komponen induk:

Subkomponen:

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

Komponen induk:

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

3. Pemindahan nilai antara komponen bukan ibu bapa dan anak:

Untuk memindahkan nilai antara komponen bukan ibu bapa dan anak, anda perlu menentukan orang awam instance fail bus.js sebagai gudang perantaraan untuk memindahkan nilai , jika tidak, kesan pemindahan nilai antara komponen penghalaan tidak akan dicapai.

Bas awam.js

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

Komponen A:

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

Komponen B:

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

Cadangan berkaitan:《 tutorial vue.js》

Atas ialah kandungan terperinci Apakah tiga cara untuk menghantar nilai dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!