在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>
在上述示例中，传递数据的方式是通过在父组件中使用v-bind指令将数据绑定到子组件的props属性上，并在子组件内部访问props接收数据。同时，在子组件内部定义了两个方法addCount和reduceCount，用于触发自定义事件，从而向父组件emit事件。
最后需要注意的是，父子组件之间的数据流是单向的，即数据只能从父组件流向子组件，不能反过来。如果子组件想要修改数据，必须通过emit事件来通知父组件进行相应的操作。
您可能感兴趣的文章:
- vue.js 父向子组件传参的实例代码
- Vue.js父与子组件之间传参示例
- vue-router2.0 组件之间传参及获取动态参数的方法
- Vue3父子组件传参有关sync修饰符的用法详解
- vue组件和iframe页面的相互传参问题及解决
- 详解Vue 路由组件传参的 8 种方式
- Vue传参一箩筐(页面、组件)
- VUE组件传参超详细讲解
- 关于Vue组件间的常用传参方式