Vue3学习小结-组件间的通信Props的初步使用

🌟 Vue3进阶秘籍：巧用Props打造动态组件小红书风格案例

🎉 想让你的小红书页面更有互动感吗？今天，我们来聊聊Vue3中的props，它是连接父组件与子组件的桥梁，让你的组件更加灵活多变！🚀

📚 理论速览

在Vue3中，props允许子组件接收来自父组件的数据，使得组件之间的通信变得简单直接。这不仅提高了组件的可重用性，还让状态管理变得更加清晰。

💻 实战演练：动态标题卡片组件

我们将创建一个可以动态显示不同标题和描述的卡片组件。这将帮助你在小红书上创建多样化的内容区块，吸引更多用户的注意。✨

✒️ 编码时间

首先，我们需要创建一个DynamicCard.vue组件：

<template>
  <div class="dynamic-card">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义Props
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: 'This is a description.',
  },
});

// 使用Props初始化组件状态
const title = ref(props.title);

// 方法：改变标题
const changeTitle = () => {
  title.value = 'New Title!';
};

// 生命周期钩子：组件挂载后打印Props信息
onMounted(() => {
  console.log('Component Mounted:', props);
});
</script>

<style scoped>
.dynamic-card {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
}
</style>

📱 使用组件

接下来，在你的父组件中引入并使用DynamicCard.vue：

<template>
  <div>
    <DynamicCard :title="postTitle" :description="postDescription" />
  </div>
</template>

<script setup>
import DynamicCard from './DynamicCard.vue';

// 父组件的数据
const postTitle = '我的小红书旅程';
const postDescription = '分享我的日常，探索世界的美好。';
</script>

🎯 结果分析

当你运行应用时，你会看到一个带有动态标题和描述的卡片组件。点击“Change Title”按钮会触发标题的变化，展示了组件内部状态的响应式更新。

🤔 小结

通过使用props，Vue3组件可以轻松接收并展示从父组件传来的数据，同时保持良好的封装性和复用性。这对于构建复杂且交互丰富的用户界面非常有帮助。
具体来说有3中写法：
// 第一种写法：仅接收

• const props = defineProps([‘list’])

// 第二种写法：接收+限制类型

• defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性

• let props = withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:‘aa01’,name:‘阿丽娅’,age:18}] })

现在，你已经掌握了Vue3中props的基本用法，快去尝试创建自己的动态组件吧！🚀

别忘了，持续实践和学习是提高技能的关键。请收藏，点赞和关注我！如果你有任何疑问或需要进一步的帮助，欢迎随时提问！👨‍💻✨

#Vue3 #前端开发 #组件通信