vue2.0组件之间怎么传值？组件传输方式浅析-Vue.js-PHP中文网

vue2.0组件之间怎么传值？组件传输方式浅析

青灯夜游

发布： 2022-07-05 16:21:47

转载

2533人浏览过

vue组件之间怎么传值？下面本篇文章给大家介绍一下vue2.0中的组件传输方式，希望对大家有所帮助！

vue2.0组件之间怎么传值？组件传输方式浅析

组件化开发是VUE中重要的开发方式，当各组件分离开发时，就必然会存在组件之间传值的问题。（学习视频分享：vuejs视频教程）

props传prop值

props传值是父子组件之间传值最常见的方式，在引用子组件的时候，加入想要传输给子组件的数据并通过props进行数据获取实现传值。

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

登录后复制

当我们使用了props完成了父组件将数据传给子组件，这种情况下，子组件从父组件中获取到的数据并不能够对数据进行更改，必须要使用$emit才能对传输的值进行修改。

立即学习“前端免费学习笔记（深入）”；

$emit传值修改prop

props与$emit联合使用，才能实现父子组件之间的传值，也就是通过子组件$emit处理父组件的事件来实现子组件对父组件中的数据进行修改并传值给父组件。

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);
    }
}

登录后复制

不仅是props，还可以通过model语法糖实现父子组件之间的传值，而且这样的传值方式特别的繁琐，会造成很多不便。

v-model传prop值

model可以将value替代具体的值与$emit完成父子组件之间的传值，写法略有不同。

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

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

登录后复制

也可以通过定义model（不需要使用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);
        }
    }
}

登录后复制

然而v-model只能处理一个prop，如果我们要处理多个prop的话，就不能够使用了。

.sync实现多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);
        }
    }
}

登录后复制

不过，在VUE3中，sync将不需要再使用，v-model将会支持多个prop传值。

除了使用prop传值，还可以通过ref指向组件获取子组件中的属性或者方法。

ref 子组件调用

通过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);
        }
    }
}

登录后复制

不仅仅是可以通过ref来实现子组件数据获取，还可以通过 $children&$ parent 来传递父子组件中的数据。

`$children` & `$parent`

$children可以获取到一个父组件的所有子组件的数组，可以通过其获取到想要操作的子组件中的属性或者方法。

$parent可以获取到父组件（对象），对其进行调用。

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

查看详情

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

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

登录后复制

但是前几种方法（prop & ref）只能实现父子组件之间的传值，并不能完成父组件与具有多层嵌套关系组件之间的传值，如果真要实现的话，将会很麻烦，会造成代码冗余、可复用性极低。

我们可以通过别的方法（ $attrs&$ listeners 、 provide&inject 、 eventBus）来实现多层嵌套组件与父组件之间的传值。

`$attrs` & `$listeners`

$attrs包含了父组件中传入孙子组件的数据（除了prop已传递的属性、class、style）。通过v-bind="$attrs可以传入孙子组件中。

$listeners包含了父组件中的所有v-on事件（除了包含.native修饰器的）。通过v-on="$listeners将父组件中的方法传给孙子组件。

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

登录后复制

provide & inject

provide可以给后代组件提供需要的数据或者方法（不管是嵌套多少层的组件）。

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状态管理器（常用）。