vue3.0父子组件传递参数

最新推荐文章于 2025-02-21 11:21:34 发布

weixin_49596018

最新推荐文章于 2025-02-21 11:21:34 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/118700349

版权

本文详细介绍了在Vue3.0中如何进行父组件向子组件传递参数，以及子组件如何反馈信息给父组件。通过实例代码解析了父组件的第一部分和第二部分，以及子组件的传递回父组件的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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/reactivity";
// props的第一个参数;
export default {
  // 第1步：先用props定义，在使用setup接受传递过来的参数
  props: {
    // 父组件传递过来的参数
    chuanValue: String,
  },
  setup(props) {
    // 第2步  接受父组件的参数，并且使用
    const state = reactive({
      fatherData: props.chuanValue,
    });

    return {
      state,
    };
  },
};
</script>

<style></style>

第二部分子组件传递给父组件

壹：父组件代码部分

<template>
  <div>这是爸爸组件----{{ state.dataByson }}</div>
  <!-- 监听子组件传递过来的事件 -->
  <Erzi @sendMsg="getSondata"></Erzi>
</template>

<script>
import { reactive, defineComponent } from "vue";
import Erzi from "./Erzi";
export default defineComponent({
  components: {
    Erzi,
  },
  setup() {
    const state = reactive({
      dataByson: "",
    });

    // 监听子组件传递过来的参数的函数
    const getSondata = (value) => {
      state.dataByson = value;
    };
    return {
      state,
      getSondata,
    };
  },
});
</script>

<style></style>

贰：子组件代码部分

<template>
  <div>这是儿子组件</div>
  <button @click="sendDataHandle">click传递参数</button>
</template>

<script>
import { reactive, defineComponent } from "vue";
export default defineComponent({
  emits: ["sendDataHandle", "sendMsg"],
  setup(props, { emit }) {
    const state = reactive({
      sonData: "son的数据",
    });
    let sendDataHandle = () => {
      emit("sendMsg", state.sonData);
    };

    return {
      state,
      sendDataHandle,
    };
  },
});
</script>

<style></style>