Apakah beberapa cara untuk menghantar nilai dalam komponen vue?

Kaedah pemindahan nilai komponen: 1. Lulus nilai melalui penghalaan 2. Dengan mengikat teg subkomponen dalam komponen induk kepada data komponen induk, prop subkomponen menerima nilai diluluskan oleh komponen induk. Prop komponen menerima nilai yang diluluskan oleh komponen induk; 3. Komponen anak menghantar nilai kepada komponen induk dan menggunakan "this.$emit" untuk melintasi peristiwa getData.

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

1 Parameter penghalaan

Langkah:

①Tambah parameter semasa menentukan laluan props: true, apabila mentakrifkan laluan penghalaan, sila tinggalkan pemegang tempat parameter: nama『Penggunaan:to="'路径/'＋value"』

②Tambah parameter props:['name']

ke halaman yang anda lompati ③Nama diperoleh pada halaman yang melompat ke "Penggunaan: terus this. name dalam js; interpolasi langsung {<!-- -->{ name}} dalam html"

2. Hantar nilai daripada komponen induk kepada komponen anak

Komponen induk menghantar nilai kepada komponen anak dengan membenarkan teg komponen anak mengikat data komponen induk dalam komponen induk dan prop komponen anak menerima nilai yang diluluskan oleh komponen induk

Langkah:

①Tetapkan data untuk dihantar dalam komponen induk 『data(){ parentid: value}』

②Dalam Ikat atribut tersuai kepada subkomponen yang dirujuk dalam komponen induk dan ikat data pada atribut tersuai " mybtn>"

③ Tambahkan parameter props:['childid'] pada subkomponen dan anda boleh

Kod:

<div id="app">
	<mybtn :childid=&#39;parentid&#39; title="我是标题"></mybtn>
</div>
<script>
	new Vue({
		el:"app",
		data:{
			parentid:"88888"
		},
		components:{
			"mybtn" : {
				props: [&#39;childid&#39;,&#39;title&#39;],
	  			template: &#39;<button>我是{{childid}}号按钮{{title}}</button>&#39;
			}
		}
	})
</script>

Paparan hasil:

3. Komponen anak menghantar nilai kepada komponen induk

Cara anak menghantar nilai kepada ibu bapa ialah menggunakan ini.e m i t untuk melintasi acara getData Pertama , gunakan butang untuk mencetuskan acara setData. Dalam setData, gunakan this.emit untuk melintasi acara getData, dan akhirnya kembalikan this.msg

Langkah:

① Memandangkan komponen induk memerlukan parameter, label dalam komponen induk Tentukan acara tersuai di atas dan dapatkan parameter di dalam acara; 🎜>@myEvent=" callback"② Cetuskan peristiwa tersuai dalam subkomponen , dan lulus parameter. 『』

this.$emit('父组件中的自定义事件',参数)

<template>
  <div>
	  <mybtn :style="{color:acolor,background:bcolor}" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn>
  </div>

</template>
<script>

  export default {
    name : &#39;test&#39;,
    data () {
      return {
        childid:"666",
        acolor:&#39;blue&#39;,
        bcolor:&#39;red&#39;
      }
    },
    methods:{
      getColor(colors){
        //父组件就可以拿到子组件传过来的colors
        console.log(colors)
        this.acolor = "white";
        this.bcolor = colors;
      },
      //接收多个参数
      /*getColor(colors1,colors2){
        console.log(colors1,colors2)
        this.acolor = colors2;
        this.bcolor = colors1;
      }*/
    },
    components: {
      &#39;mybtn&#39; : {
        props : [&#39;parentid&#39;,&#39;title&#39;],
        template : `
          <div class="box">
            <p>我最初是一张白纸</p>
            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button>
          </div>
        `,
        methods: {
          changeColor(){
          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数
           this.$emit(&#39;changeColorEvent&#39;,"orange")
           //发送多个参数可以直接跟在后面
           //this.$emit(&#39;changeColorEvent&#39;,"orange","white")
          }
        }
      }
    }
  }
</script>
<style scoped>

</style>

4 Nilai lulus

Langkah:

①Tubuhkan komponen komunikasi awam () , perkenalkan komponen komunikasi ke dalam komponen yang perlu melepasi nilai

②Ikat acara dalam satu

Vue③Cetuskan acara dalam komponen lain

this.on('eventname', this. id)( 2) Kaedah 2,

Tambah data awam dalam storan setempat, yang boleh diperoleh pada dua halaman, tukar this.$ emit('eventname',( options)=>{})

tutorial vue.js

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