Bagaimana untuk menghantar nilai kepada komponen vue

Nilai lulus komponen Vue dengan cara berikut: 1. Lulus daripada bapa kepada anak lelaki; 3. Lulus nilai daripada abang; . Gunakan "$ref" untuk menghantar Nilai; 10. Nilai hantar ke sessionStorage; 11. vuex.

1. Hantar komponen induk kepada komponen anak

Tentukan prop dalam komponen anak, iaitu props:['msg'], msg boleh menjadi objek atau jenis data asas

anda ingin mentakrifkan nilai Lalai, iaitu props: {msg: {type: String, default: 'hello world'}},

Jika nilai lalai ialah jenis objek: props: { msg: { type: Object , lalai: () => { return { name: 'dan_seek' } } }}

Perlu diambil perhatian bahawa pemindahan nilai ini adalah sehala, anda tidak boleh menukar nilai komponen induk (kecuali untuk jenis rujukan kursus); dan jika anda mengubah suai secara langsung nilai prop, amaran.

Cara penulisan yang disyorkan ialah mentakrifkan semula pembolehubah dalam data() (lihat Children.vue) dan menetapkan prop padanya, sudah tentu, sifat yang dikira juga boleh diterima.

Children.vue

<template>
    <section>
        父组件传过来的消息是：{{myMsg}}
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        props:[&#39;msg&#39;],
        data() {
            return {
                myMsg:this.msg
            }
        },
        methods: {}
    }
</script>

Parent.vue

<template>
  <div class="parent">
    <Children :msg="message"></Children>
  </div>
</template>
<script>
import Children from &#39;../components/Children&#39;
export default {
  name: &#39;Parent&#39;,
  components: {
      Children
  },
  data() {
      return {
          message:&#39;hello world&#39;
}
},
}
</script>

2 Hantar komponen anak kepada komponen induk

Anda perlu menggunakan acara tersuai di sini, gunakan ini.$emit('myEvent') untuk mencetuskannya dalam komponen anak, dan kemudian dalam komponen induk Gunakan pemantauan @myEvent dalam komponen

Children.vue

<template>
    <section>
        <br>
        <div @click="clickme">click me</div>
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                childNum:0
            }
        },
        methods: {
            clickme(){
                // 通过自定义事件addNum把值传给父组件
                this.$emit(&#39;addNum&#39;,this.childNum++)
            }
        }
    }
</script>

Parent.vue

<template>
    <div class="parent">
        这里是计数：{{parentNum}}
        <Children-Com @addNum="getNum"></Children-Com>
    </div>
</template>
<script>
    import ChildrenCom from &#39;../components/Children&#39;
    export default {
        name: &#39;Parent&#39;,
        components: {
            ChildrenCom
        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum
            }
        }
    }
</script>

3 Pindahkan nilai antara komponen adik beradik

Gunakan keupayaan pencetus dan pemantauan acara tersuai. memancarkan untuk mentakrifkan acara bas acara awam, yang melaluinya Sebagai jambatan perantaraan, kita boleh menghantar nilai kepada mana-mana komponen. Dan melalui penggunaan eventBus, anda boleh memperdalam pemahaman anda tentang emit.

EventBus.js

import Vue from 'vue'export default new Vue()
Children1.vue
<template>    <section>        <div @click="pushMsg">push message</div>        <br>    </section></template><script>    import eventBus from &#39;./EventBus&#39;    export default {        name: "Children1",        components: {},        data() {            return {                childNum:0            }        },        methods: {            pushMsg(){            // 通过事件总线发送消息                eventBus.$emit(&#39;pushMsg&#39;,this.childNum++)            }        }    }</script>

Children2.vue

<template>
    <section>
        children1传过来的消息：{{msg}}
    </section>
</template>
<script>
    import eventBus from &#39;./EventBus&#39;
    export default {
        name: "Children2",
        components: {},
        data() {
            return {
                msg: &#39;&#39;
            }
        },
        mounted() {
        // 通过事件总线监听消息
            eventBus.$on(&#39;pushMsg&#39;, (children1Msg) => {
                this.msg = children1Msg
            })
        }
    }
</script>

Parent.vue

<template>
    <div class="parent">
        <Children1></Children1>
        <Children2></Children2>
    </div>
</template>
<script>
    import Children1 from &#39;../components/Children1&#39;
    import Children2 from &#39;../components/Children2&#39;
    export default {
        name: &#39;Parent&#39;,
        components: {
            Children1,
            Children2
        },
        data() {
            return {
            }
        },
        methods:{
        }
    }
</script>

Terdapat juga perpustakaan vue-bus sumber terbuka di github, anda boleh merujuknya: https://github.com/yangmingshan/vue -bus#readme

4. Lulus nilai antara laluan

i Gunakan tanda soal untuk lulus nilai

Gunakan ini.$router.push('/B?name=danseek') apabila halaman A melompat ke halaman B.

B halaman boleh menggunakan $route.query.name untuk mendapatkan nilai yang dihantar dari halaman A

Sila ambil perhatian perbezaan antara penghala dan laluan di atas

ii

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
  },

Di halaman B, anda boleh lulus ini.$route .params.name untuk mendapatkan nilai nama yang dihantar oleh laluan

iii Gunakan komponen induk-anak untuk menghantar nilai

Sejak paparan penghala itu sendiri juga merupakan komponen, kami juga boleh menggunakan komponen induk-anak untuk menghantar nilai, dan kemudian dalam Tambah props yang sepadan ke subhalaman Kerana laluan tidak dimuat semula selepas jenis dikemas kini, anda tidak boleh mendapatkan jenis terkini secara langsung nilai dalam cangkuk yang dipasang pada subhalaman Sebaliknya, anda mesti menggunakan jam tangan.

<router-view :type="type"></router-view>
// 子页面
......
props: [&#39;type&#39;]
......
watch: {
            type(){
                // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
            },
        },

5 Gunakan $ref untuk menghantar nilai

Gunakan keupayaan $ref untuk menentukan ID untuk komponen anak Komponen induk boleh mengakses secara langsung kaedah dan sifat dalam komponen anak melalui ID ini

Tentukan dahulu. komponen kanak-kanak Kanak-kanak. kaedah getName(), yang perlu disediakan Kepada semua keturunan

<template>
    <section>
        传过来的消息：{{msg}}
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                msg: &#39;&#39;,
                desc:&#39;The use of ref&#39;
            }
        },
        methods:{
            // 父组件可以调用这个方法传入msg
            updateMsg(msg){
                this.msg = msg
            }
        },
    }
</script>

Pilihan menyediakan membolehkan kami menentukan data/kaedah yang ingin kami sediakan kepada komponen keturunan

Kemudian dalam mana-mana komponen keturunan, kami boleh menggunakan suntikan untuk menyuntik data/kaedah komponen induk ke dalam contoh semasa:

<template>
    <div class="parent">
        <!-- 给子组件设置一个ID ref="children" -->
        <Children ref="children"></Children>
        <div @click="pushMsg">push message</div>
    </div>
</template>
<script>
    import Children from &#39;../components/Children&#39;
    export default {
        name: &#39;parent&#39;,
        components: {
            Children,
        },
        methods:{
            pushMsg(){
                // 通过这个ID可以访问子组件的方法
                this.$refs.children.updateMsg(&#39;Have you received the clothes？&#39;)
                // 也可以访问子组件的属性
                console.log(&#39;children props:&#39;,this.$refs.children.desc)
            }
        },
    }
</script>

Parent.vue

provide: function () {
  return {
    getName: this.getName()
  }
}

Children.vue

inject: ['getName']

7 Cucu nenek moyang $attrs

Biasanya, anda perlu menggunakan peralihan perantaraan sebagai, tetapi peralihan perantaraan bapa. dengan cara ini, komponen bapa akan mempunyai lebih banyak perkara yang tidak ada kaitan dengan perniagaan komponen induk, gandingan tinggi, boleh dipermudahkan dengan bantuan $attrs, dan tidak ada moyang mahupun cucu yang perlu membuat pengubahsuaian

GrandParent. vue

<template>
    <div class="parent">
        <Children></Children>
    </div>
</template>
<script>
    import Children from &#39;../components/Children&#39;
    export default {
        name: &#39;Parent&#39;,
        components: {
            Children,
        },
        data() {
            return {
                name:&#39;dan_seek&#39;
            }
        },
        provide: function () {
            return {
                getName: this.name
            }
        },
    }
</script>

Parent.vue

<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
            }
        },
        inject: [&amp;#39;getName&amp;#39;],
    }
</script>

Children.vue

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>
<script>
    import Parent from &#39;./Parent&#39;
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

Paparan hasil

Komponen ibu bapa diterima

Nama datuk: grandParent

Nama datuk

Jantina datuk: Lelaki

Umur datuk: 88

Hobi datuk: kod

8, moyang cucu

Dengan bantuan $listeners middle Events, cucu boleh memberitahu nenek moyang dengan mudah untuk contoh kod, lihat 7

9 contoh komponen melalui induk, dan kemudian anda boleh mengakses sifat dan kaedah komponen induk melalui contoh ini Ia juga mempunyai akar saudara Anda boleh mendapatkan contoh komponen akar.

Sintaks:

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>
<script>
  import Children from &#39;./Children&#39;
  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:[&#39;name&#39;],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

Jadi, dalam contoh menghantar komponen anak kepada komponen induk, anda boleh menggunakan ini.$parent.getNum(100) untuk menghantar nilai kepada komponen induk.

10. Pemindahan nilai SessionStorage

sessionStorage ialah objek global penyemak imbas, dan data yang disimpan di dalamnya akan dikosongkan apabila halaman ditutup. Menggunakan ciri ini, kami boleh berkongsi salinan data merentas semua halaman.

Sintaks:

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>
    <button @click="sayKnow">我知道啦</button>
  </section>
</template>
<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:[&#39;sex&#39;,&#39;age&#39;,&#39;hobby&#39;,&#39;name&#39;],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit(&#39;sayKnow&#39;,&#39;我知道啦&#39;)
      }
    },
    mounted() {
    }
  }
</script>

Nota: Ia menyimpan pasangan nilai kunci, yang hanya boleh daripada jenis rentetan Jika anda ingin menyimpan objek, anda perlu menggunakan let objStr = JSON.stringify(obj) untuk menukarnya menjadi rentetan dan. kemudian simpannya (gunakan apabila biarkan obj = JSON.parse(objStr) menghuraikan ke dalam objek).

Adakah menyusahkan untuk menyimpan objek seperti ini, saya mengesyorkan storan baik perpustakaan, yang merangkum sessionStorage, dan anda boleh terus menggunakan APInya untuk menyimpan objek

// 获父组件的数据
this.$parent.foo
// 写入父组件的数据
this.$parent.foo = 2
// 访问父组件的计算属性
this.$parent.bar
// 调用父组件的方法
this.$parent.baz()

11, vuex

Saya tidak akan memperkenalkan cara menggunakan vuex terkenal ini di sini, kerana ia akan menjadi terlalu panjang untuk menulisnya dengan jelas...

Jika anda tidak bercadang untuk membangunkan aplikasi satu halaman yang besar, menggunakan Vuex mungkin menyusahkan dan berlebihan. Memang benar - jika apl anda cukup mudah, anda mungkin tidak perlu menggunakan Vuex.

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