Apakah cara untuk menghantar nilai dalam Vue?

Kaedah pemindahan nilai Vue termasuk: 1. prop dihantar ke bawah dan acara diteruskan ke atas; contoh awam fail pemindahan nilai antara.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.5.17, komputer DELL G3.

Apakah kaedah lulus nilai dalam Vue?

Tiga kaedah lulus nilai yang biasa digunakan dalam Vue

Penyampaian Ibu Bapa kepada anak-anak

Hubungan antara komponen ibu bapa dan anak boleh diringkaskan apabila prop diturunkan ke bawah dan acara diteruskan ke atas. Komponen induk menghantar data kepada komponen anak melalui prop, dan komponen anak menghantar mesej kepada komponen induk melalui acara.

Komponen induk:

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

Komponen anak:

<template>
  <p>
    子组件:
    <span>{{inputName}}</span>
  </p>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,   //在这里对传过来的进行接收
      required: true
    }
  }
</script>

Dari anak kepada bapa

Subkomponen boleh mencetuskan peristiwa tersuai komponen induk melalui $emit. vm.$emit(event,arg) digunakan untuk mencetuskan peristiwa pada tika semasa; 🎜 >

Melalui nilai antara komponen bukan ibu bapa dan anak

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

Untuk menghantar nilai antara komponen bukan ibu bapa dan anak, anda perlu mentakrifkan fail contoh awam awam bus.js sebagai gudang perantaraan untuk menghantar nilai, sebaliknya penghalaan Kesan pemindahan nilai antara komponen tidak dapat dicapai.

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

Bas awam.js

Komponen A:

Komponen B:

Cadangan berkaitan: "

tutorial vue.js

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

》《

5 pilihan tutorial video vue.js terbaharu

》

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

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