vue3子组件接受props属性

最新推荐文章于 2024-06-22 22:30:00 发布

forwardMyLife

最新推荐文章于 2024-06-22 22:30:00 发布

阅读量475

点赞数 2

文章标签： javascript 开发语言 ecmascript vue

本文链接：https://blog.csdn.net/lucky_ly/article/details/137093244

版权

本文详细介绍了如何在Vue中通过props从父组件向子组件传递值，以及如何在子组件中接收并处理这些值，包括使用`defineProps`和`emit`事件的示例。

摘要由CSDN通过智能技术生成

在vue中子组件需要接受父组件传递的值，可以通过props来传递，如下

子组件配置

<script setup lang="ts">
  defineProps(['title'])
  defineEmits(['alertEvent'])
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="$emit('alertEvent',title)">点我</button>
  </div>

</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {

  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

需要在setup块中使用defineProps([‘title’])定义，属性名，接受的属性可直接使用于模版内，

父组件传值

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <!-- <HelloWorld msg="You did it!" /> -->
      <Demo title="hello world" v-on:alertEvent="accept"/>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>