vue3.0父子组件动态数据传参

Vue 3.0中，父子组件之间的动态数据传参可以通过props和v-model来实现。

在父组件中，可以使用props来定义需要传递给子组件的参数。在父组件的template中，将需要传递的参数作为props的属性值，并在子组件中使用v-bind将父组件的值传递给子组件的props。例如，父组件中的代码可以如下所示：

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

在子组件中，可以使用props来接收父组件传递的参数。在子组件的template中，可以直接使用父组件传递过来的值。例如，子组件中的代码可以如下所示：

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

通过这种方式，父组件和子组件之间可以实现动态的数据传参。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue3.0父子组件传递参数](https://blog.csdn.net/weixin_49596018/article/details/118700349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3.0父子组件自定义v-model传参](https://blog.csdn.net/weixin_44441196/article/details/118406189)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]