vue3中父子组件通讯

最新推荐文章于 2025-06-06 01:31:59 发布

冷酷吗喽

最新推荐文章于 2025-06-06 01:31:59 发布

阅读量186

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_72189003/article/details/140663941

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

在子组件HelloWorld.vue中：

<template>
  <div class="hello">
   111111
  </div>
  
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

在父组件中HomeView.vue：

<template>
  <div>

    <!-- slot插槽 -->
    <slot>11111</slot>

    <HelloWorld />
    222

</div>
</template>
<script lang="ts" setup>
import HelloWorld from '@/components/HelloWorld.vue';

import {ref} from 'vue';

</script>