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:

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    B组件:
    db522d5eab17920485b61ce7362da4b9
    45a2772a6b6107b401db3c9b82c049c2{{name}}54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  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++
      }
    }
  }
2cacc6d41bbb37262a98f745aa00fbf0

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!