Bagaimana untuk memindahkan nilai antara komponen vue2.0? Analisis ringkas kaedah penghantaran komponen

vue Bagaimana hendak memindahkan nilai antara komponen? Artikel berikut akan memperkenalkan anda kepada kaedah penghantaran komponen dalam vue2.0 Saya harap ia akan membantu anda!

Pembangunan komponen ialah kaedah pembangunan yang penting dalam VUE Apabila setiap komponen dibangunkan secara berasingan, sudah pasti akan timbul masalah pemindahan nilai antara komponen. (Mempelajari perkongsian video: tutorial video vuejs)

nilai props

propsCara paling biasa untuk menghantar nilai antara induk dan komponen anak adalah untuk lulus nilai Cara biasa ialah menambah data yang anda ingin pindahkan kepada subkomponen apabila merujuk subkomponen dan mendapatkan data melalui prop untuk lulus nilai.

Parent.vue
<child :child-data = "childData"></child>

Child.vue
export default {
    // 数组写法
    props: ["child-data"];
    
    // 对象写法
    props: {
        child-data: {
            type: String,
            require: true, // 是否必须
            default: "默认值", // 设置默认值
            validator(val) {
                return true;
            }, // 设置值的 验证 ，验证该值是否符合（true）
        }
    }
}

Apabila kami menggunakan props untuk melengkapkan komponen induk yang menghantar data kepada komponen anak, dalam kes ini, data yang diperolehi oleh komponen anak daripada komponen induk tidak boleh Tukar , anda mesti menggunakan $emit untuk mengubah suai nilai yang dihantar.

$emit nilai pas untuk mengubah suai prop

props boleh digunakan bersama dengan $emit untuk mencapai pemindahan nilai antara komponen induk dan anak, iaitu, melalui komponen anak$emitKendalikan peristiwa komponen induk untuk membenarkan komponen anak mengubah suai data dalam komponen induk dan menghantar nilai kepada komponen induk.

Parent.vue
<child :child-data = "childData" @change-child="changeChild"></child>
methods: {
    changeChild(val) {
        console.log(val); // 子组件传递过来的更改了的新值
        this.childData = val;
    }
}

Child.vue
methods: {
    handleChildData() {
        this.$emit("change-child", new-child-data);
    }
}

Bukan sahaja props, tetapi juga model语法糖 boleh digunakan untuk memindahkan nilai antara komponen induk dan anak Selain itu, kaedah pemindahan nilai sedemikian amat menyusahkan dan akan menyebabkan a banyak kesulitan.

v-model melepasi nilai prop

modelAnda boleh menggantikan nilai khusus dengan value untuk melengkapkan pemindahan nilai antara komponen induk dan anak tulis Sedikit berbeza. $emit

Parent.vue
<child v-model = "childData"></child>

Child.vue
export default {
    props: ["value"], // value
    methods: {
        handleChildData() {
            this.$emit("input", new-child-data);
        }
    }
}

juga boleh dilalui dengan mentakrifkan

(tidak perlu menggunakan model untuk mendapatkan data). props

Parent.vue
<child v-model = "childData"></child>

Child.vue
export default {
    model: {
        prop: "child-data", // 重新取名
        event: "change-child-data",
    },
    methods: {
        handleChildData() {
            this.$emit("change-child-data", new-child-data);
        }
    }
}

Namun,

hanya boleh mengendalikan satu v-model Jika kita mahu mengendalikan berbilang prop, ia tidak boleh digunakan. prop

.sync melaksanakan pemindahan nilai berbilang prop

Parent.vue
<child :child-data.sync = "childData"></child>

Child.vue
export default {
    props: ["child-data"],
    methods: {
        handleChildData() {
            this.$emit("update:child-data", new-child-data);
        }
    }
}

Walau bagaimanapun, dalam VUE3,

tidak akan digunakan lagi dan sync akan Akan menyokong berbilang v-model nilai lulus. prop

Selain menggunakan

untuk menghantar nilai, anda juga boleh menggunakan prop untuk menunjuk ke komponen untuk mendapatkan sifat atau kaedah dalam subkomponen. ref

ref panggilan sub-komponen

menunjuk ke komponen melalui

, yang boleh diperoleh dengan memanggil sifat atau kaedah dalam komponen. ref

Parent.vue
<child ref="child"></child>
export default {
    mounted() {
        const child = this.$refs.child;
        console.log(child.childData);
        child.handleChild("handle-child-data");
    }
}

Child.vue
export default {
    data() {
        return {
            childData: "child-data",
        }
    },
    methods: {
        handleChild(val) {
            console.log(val);
        }
    }
}

Bukan sahaja anda boleh mendapatkan data komponen anak melalui

, tetapi anda juga boleh menghantar ibu bapa dan anak melalui refanak&ibu bapa data dalam komponen.

& $children$parent

boleh mendapatkan tatasusunan semua sub-komponen komponen induk, yang melaluinya anda boleh mendapatkan operasi yang diingini Sifat atau kaedah dalam komponen kanak-kanak. $children

boleh mendapatkan komponen induk (objek) dan memanggilnya. $parent

Parent.vue
this.$children[0].handleChild("change-child[0]-data");

Child.vue
this.$parent.handleParent("change-parent-data");

Walau bagaimanapun, beberapa kaedah pertama (

prop & ref) hanya boleh merealisasikan pemindahan nilai antara komponen induk dan anak, dan tidak boleh melengkapkan pemindahan antara komponen induk dan komponen dengan berbilang- perhubungan bersarang lapisan Jika ia benar-benar dilaksanakan, ia akan menjadi sangat menyusahkan untuk memindahkan nilai di antara mereka, mengakibatkan redundansi kod dan kebolehgunaan semula yang sangat rendah.

Kita boleh menggunakan kaedah lain (

attrs&pendengar , provide&inject , eventBus) untuk merealisasikan hubungan antara komponen bersarang berbilang lapisan dan komponen induk nilai lulus.

& $attrs$listeners

mengandungi data yang dihantar kepada komponen cucu dalam komponen induk (kecuali $attrs atribut yang diluluskan, prop, class). Ia boleh disalurkan ke dalam komponen cucu melalui style. v-bind="$attrs

mengandungi semua $listeners acara dalam komponen induk (kecuali yang mengandungi v-on pengubah suai). Hantarkan kaedah dalam komponen induk kepada komponen cucu melalui .native. v-on="$listeners

<sun-child v-bind="$attrs" v-on="$listeners"></sun-child>

menyediakan & menyuntik

boleh memberikan data atau kaedah yang diperlukan kepada komponen turunan (tidak kira berapa banyak lapisan komponen bersarang). provide

Anda boleh mendapatkan data atau kaedah yang disediakan dalam mana-mana komponen induk dan menggunakannya secara langsung. inject

Parent.vue
provide() {
    return {
        parent-data: "parent-data",
        handleParent: this.handleParent,
    }
},
methods: {
    handleParent() {},
}

Sun-Child.vue
inject: ["parent-data", handleParent"],

但是provide & inject是不可控的，因为这个里面传递的数据并不是响应式的（其中一个数据改变，并不会影响另外的），当某个嵌套组件使用某个传输的值的时候并不能追溯到是哪个父组件，所以，这种方式并不是特别可取。

eventBus 中央事件总线

eventBus，顾名思义，中央事件总线，可以通过其实现各个层套的组件之间的传值，包括兄弟组件。

我们可以通过将其抽离出来成一个单独的js文件（Bus.js），挂载到全局（Vue.prototype.$bus）或者按需引入，又或者是存入到根对象的data上。

// 以按需引入的情况为例
import Bus from 'Bus.js'

Bus.$emit("handleBus", "自定义事件"); // 向外部传递数据

Bus.$on("handleBus", data => {}); // 触发事件，获取数据

Bus.$off("handleBus"); // 取消对自定义事件的监听

但是这些方法也只是适用于小范围内的数据使用较少的组件中，需要传递的数据过多的话，维护会很麻烦，且可复用性也极低。当数据传递量大的时候，建议使用vuex状态管理器（常用）。

Tips

其实也可以通过插槽进行父子组件的值传递，不过插槽的作用不止如此，但是如果有遇到使用插槽更方便的情况的时候可以使用插槽slot。

【相关视频教程推荐：web前端】

Atas ialah kandungan terperinci Bagaimana untuk memindahkan nilai antara komponen vue2.0? Analisis ringkas kaedah penghantaran komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!