vue.js父子组件传参的原理与实现方法[原创]

来源：jb51　　时间：2023/4/26 8:49:52　　对本文有异议

在Vue中，父子组件之间的数据传递常常会使用props进行实现。具体原理是，当一个父组件嵌套了一个子组件时，在子组件内部使用props接收从父组件传递过来的数据，这些数据可以是基础类型如字符串、数字等，也可以是对象或者数组等复杂类型。

下面展示一个例子，通过一个简单的计数器组件Counter.vue，演示如何在父组件App.vue中传值到子组件Counter.vue并更新计数器操作：

子组件：

<!-- Counter.vue -->
<template>
? <div class="counter">
? ? <h4>{{ title }}</h4>
? ? <p>当前计数：{{ count }}</p>
? ? <button @click="addCount">+1</button>
? ? <button @click="reduceCount">-1</button>
? </div>
</template>
 
<script>
export default {
? name: "Counter",
? props: {
? ? title: {
? ? ? type: String,
? ? ? required: true,
? ? },
? ? count: {
? ? ? type: Number,
? ? ? required: true,
? ? },
? },
? methods: {
? ? // 添加计数
? ? addCount() {
? ? ? this.$emit("add-count");
? ? },
? ? // 减少计数
? ? reduceCount() {
? ? ? this.$emit("reduce-count");
? ? },
? },
};
</script>

父组件：

<!-- App.vue -->
<template>
? <div class="container">
? ? <h2>计数器应用</h2>
? ? <hr />
? ? <!-- 父组件传递计数器标题和当前计数给子组件 -->
? ? <Counter :title="title" :count="count" @add-count="handleAddCount" @reduce-count="handleReduceCount" />
? </div>
</template>
 
<script>
import Counter from "./components/Counter.vue";
 
export default {
? name: "App",
? components: {
? ? Counter,
? },
? data() {
? ? return {
? ? ? title: "计数器",
? ? ? count: 0,
? ? };
? },
? methods: {
? ? // 添加计数
? ? handleAddCount() {
? ? ? this.count++;
? ? },
? ? // 减少计数
? ? handleReduceCount() {
? ? ? this.count--;
? ? },
? },
};
</script>