vue3.0的父子传参

在Vue3.0中，可以通过props将数据从父组件传递给子组件。我将根据提供的引用内容给出一个示例，说明Vue3.0中的父子传参的步骤和代码实现。

首先，我们有一个父组件和一个子组件。父组件需要向子组件传递一个名为chuanValue的参数。

父组件的代码如下所示：

<template>
  <div>
    父组件【父传子】：：===>{{ state.chuanValue }}
    <Son :chuanValue="state.chuanValue"></Son>
  </div>
</template>

<script>
import Son from "./Son";
import { reactive } from "vue";

export default {
 components: {
    Son,
  },
  setup() {
    const state = reactive({
      chuanValue: "fatherData",
    });
    return { state };
  },
};
</script>

<style></style>

子组件的代码如下所示：

<template>
  <!-- 使用父组件传递过来的参数 -->
  <div>
    子组件：：===>{{ state.fatherData }}
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  props: {
    chuanValue: String, // 父组件传递过来的参数
  },
  setup(props) {
    const state = reactive({
      fatherData: props.chuanValue,
    });
    return { state };
  },
};
</script>

<style></style>

在父组件中，我们使用了`<Son :chuanValue="state.chuanValue"></Son>`来将`state.chuanValue`传递给子组件。子组件通过`props`接收父组件传递的参数，并将其赋值给`state.fatherData`。

这样，父组件中的`state.chuanValue`的值就会传递给子组件中的`state.fatherData`，实现了父子传参。

来源：第二部分：子组件代码
来源：一、父传子 第一部分：父组件代码