vue3父子组件传值,子组件使用vue2写法

前端小云儿

于 2024-02-10 11:01:00 发布

阅读量261

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3知识点文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136089974

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在 Vue3 项目中，如何实现父组件向使用 Vue2 语法的子组件传递值。通过实例解析了 Vue3 的 Prop 传递机制，并展示了子组件如何接收和响应父组件的数据变化，为混合使用 Vue2 和 Vue3 组件提供了解决方案。

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

父组件

<template>
  <div>
    <h1 class="father">我是父组件曹操</h1>
    <child :money="money" :info="info"></child>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import child from "./child.vue";
let money = ref(10001);
let info = ref(10002);
onMounted(() => {
  console.log(money);
});
</script>

<style>
.father {
  width: 100%;
  height: 200px;
  background: burlywood;
}
</style>

子组件

<template>
  <div class="child">
    <h2>我是子组件曹植</h2>
    <h3>父亲传递过来的{
  
  { money }}--{
  
  { info }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    ret