Apakah cara untuk menghantar nilai kepada komponen vue?

Kaedah pemindahan nilai komponen: 1. Pindahkan nilai melalui penghalaan 2. Dengan mengikat label subkomponen dalam komponen induk kepada data komponen induk, prop subkomponen menerima nilai yang diluluskan oleh komponen induk , dan prop sub-komponen menerima Nilai yang diluluskan oleh komponen induk 3. Apabila komponen anak menghantar nilai kepada komponen induk, gunakan "this.$emit" untuk melintasi peristiwa getData 4. Apabila menghantar nilai ​​antara komponen bukan induk, satu mengikat acara "this.on" dan satu lagi mencetuskan peristiwa "this.$ emit", atau menambah data awam dalam storan setempat, boleh diperolehi dalam dua halaman

Cara komponen vue melepasi nilai:

1 Laluan parameter laluan

Langkah:

①Tambah prop parameter: benar semasa mentakrifkan laluan, tinggalkan pemegang tempat parameter: nama『Penggunaan: untuk ="'path/'＋value"』

②Tambah dalam halaman yang anda lompat ke Parameter props atas:['name']

③Nama diperoleh pada halaman yang melompat ke "Penggunaan: terus ini. nama dalam js; interpolasi langsung {{ name}} dalam html"

2. Pemindahan nilai komponen induk kepada anak

Komponen induk memindahkan nilai kepada komponen anak dengan mengikat teg komponen anak kepada data komponen induk dan prop komponen anak terima nilai yang diluluskan oleh komponen induk

Langkah:

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

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

③Tambah prop parameter:['childid'] dalam komponen anak, kemudian

Kod:

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

Paparan hasil:

3 Sub Cara komponen menghantar nilai kepada komponen induk

ialah menggunakan ini.e m i t untuk melintasi acara getData Pertama, gunakan butang untuk mencetuskan acara setData, gunakan this.emit dalam setData untuk melintasi acara getData, dan akhirnya kembalikan this.msg

Langkah:

①Oleh kerana komponen induk memerlukan parameter, tentukan peristiwa tersuai pada label dalam komponen induk dan dapatkan parameter di dalam acara; "@myEvent=" panggil balik" menerima parameter dalam fungsi panggil balik"

② Cetuskan peristiwa tersuai dalam komponen anak dan parameter pas. 『this.$emit('Acara tersuai dalam komponen induk', parameter)』

Kod:

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

4 Memindahkan nilai antara komponen bukan induk

Langkah:

)

1.(1)

① Buat komponen komunikasi awam (Vue), dan perkenalkan komponen komunikasi ke dalam komponen yang perlu melepasi nilai

② Ikat acara this.on('eventname', this. id) dalam satu

③ In satu lagi Peristiwa dicetuskan dalam komponen ini.$ emit('eventname',( options)=>{})

(2) Kaedah 2,

Tambahkan data awam dalam storan setempat, yang boleh diperoleh dan ditukar pada dua muka surat 🎜

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