vue2.0 구성요소 간에 값을 전송하는 방법은 무엇입니까? 컴포넌트 전송 방법에 대한 간략한 분석

vue구성 요소 간에 값을 전송하는 방법은 무엇입니까? 다음 글에서는 vue2.0의 컴포넌트 전송 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

컴포넌트 기반 개발은 VUE에서 중요한 개발 방식입니다. 각 컴포넌트를 별도로 개발하게 되면 필연적으로 컴포넌트 간의 가치 전달 문제가 발생하게 됩니다. (학습 동영상 공유: vuejs 동영상 튜토리얼)

props 전달 props

props 값 전달은 하위 구성 요소를 참조할 때 상위 구성 요소와 하위 구성 요소 간에 값을 전달하는 가장 일반적인 방법입니다. 전송하려는 데이터를 하위 구성 요소에 추가하고 props를 통해 데이터를 얻어 값 전달을 달성합니다. 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"],

props를 사용하여 하위 구성 요소에 데이터를 전달하는 상위 구성 요소를 완성할 때, 이 경우 상위 구성 요소에서 하위 구성 요소가 얻은 데이터는 🎜데이터를 변경할 수 없습니다🎜. 전송된 값을 수정하려면 $emit를 사용하세요. 🎜

🎜$emit는 prop을 수정하기 위해 값을 전달합니다🎜🎜🎜props와 $emit를 함께 사용하여 관계를 실현할 수 있습니다. 상위 구성 요소와 하위 구성 요소 사이 값으로 전달한다는 것은 하위 구성 요소 $emit가 상위 구성 요소의 이벤트를 처리하여 하위 구성 요소가 상위 구성 요소의 데이터를 수정하고 해당 값을 상위 구성 요소. 🎜

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

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

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

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

🎜props뿐만 아니라 모델 구문 설탕을 통해 상위 구성 요소와 하위 구성 요소 간의 값 전송을 달성할 수 있으며 이러한 값 전송 방법은 특히 번거롭고 불편이 많습니다. 🎜

🎜v-model이 prop 값을 전달합니다🎜🎜🎜model은 특정 값을 $emit으로 대체할 수 있으며 값 전송을 완료합니다. 상위 구성요소와 하위 구성요소 사이에 작성 방법이 약간 다릅니다. 🎜rrreee🎜model을 정의하여 값을 전달할 수도 있습니다(데이터를 얻기 위해 props를 사용하지 않고). 🎜rrreee🎜그러나 v-model은 하나의 prop만 처리할 수 있습니다. 여러 prop를 처리하려면 사용할 수 없습니다. 🎜

🎜.sync는 다중 속성 값 전송을 구현합니다🎜🎜rrreee

🎜그러나 VUE3에서는 sync가 더 이상 사용되지 않습니다. v-model은 여러 prop 값을 지원합니다. 🎜

🎜prop를 사용하여 값을 전달하는 것 외에도 ref를 사용하여 구성 요소를 가리켜 하위 구성 요소의 속성이나 메서드를 얻을 수도 있습니다. 🎜

🎜ref 하위 구성 요소 호출 🎜🎜🎜은 구성 요소의 속성이나 메서드를 호출하여 얻을 수 있는 ref를 통해 구성 요소를 가리킵니다. 🎜rrreee🎜 ref를 통해 하위 컴포넌트 데이터를 얻을 수 있을 뿐만 아니라 🎜children&parent🎜을 전달합니다. 부모-자식 구성 요소의 데이터. 🎜

🎜$children 및 $parent🎜🎜🎜$children은 부모 An을 얻을 수 있습니다. 작동하려는 하위 구성 요소의 속성이나 메서드를 얻을 수 있는 구성 요소의 모든 하위 구성 요소 배열입니다. 🎜🎜$parent는 상위 구성요소(객체)를 가져와서 호출할 수 있습니다. 🎜rrreee🎜그러나 처음 몇 가지 방법(🎜prop 및 ref🎜)은 상위 구성 요소와 하위 구성 요소 간의 값 전송만 실현할 수 있으며, 실제로 필요한 경우 상위 구성 요소와 다층 중첩 관계가 있는 구성 요소 간의 값 전송을 완료할 수 없습니다. 구현하는 것은 매우 번거롭고 코드 중복성과 극도로 낮은 재사용성을 초래할 것입니다. 🎜🎜다른 방법을 사용할 수 있습니다(🎜attrs&listeners, Provide&inject, eventBus🎜)를 사용하여 다중 레이어 중첩 구성 요소와 상위 구성 요소 간의 값 전송을 실현합니다. 🎜

🎜$attrs 및 $listeners🎜🎜🎜$attrs는 상위 항목에 포함됩니다. 컴포넌트 손자 구성 요소에 전달된 데이터입니다(prop 전달 속성, 클래스, 스타일 제외). v-bind="$attrs는 손자 구성 요소로 전달될 수 있습니다. 🎜🎜$listeners에는 상위 구성 요소 이벤트의 모든 v-on이 포함됩니다. (.native 데코레이터를 포함하는 경우 제외) v-on="$listeners를 통해 상위 구성 요소의 메서드를 손자 구성 요소에 전달합니다. 🎜rrreee

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

Tips

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

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

위 내용은 vue2.0 구성요소 간에 값을 전송하는 방법은 무엇입니까? 컴포넌트 전송 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!