【vue】defineProps 传数据 父传子

先行知识

传值过程

App.vue

html 复制代码
<template>

  <Header name="1234567890" url="https://www.1234567890.com" />
  <hr>
  <!-- <Footer v-bind="propsWeb" /> -->
  <Footer :="propsWeb" />
  <hr>
  <button @click="addUser();">添加用户</button>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

/*非响应式数据,子组件中的值不会随之变化
const propsWeb = ({
  user: 15,
  // url:"https://www.1234567890.com"
})*/
//响应式数据
const propsWeb = reactive({
  user: 15,
  // url:"https://www.1234567890.com"
})

const addUser = () => {
  propsWeb.user++;
  console.log(propsWeb.user);
}
</script>


<style lang="scss" scoped></style>

Header.vue

html 复制代码
<template>
    <h2>header</h2>
    <p>name: {{ props.name }}</p>
    <p>url: {{ props.url }}</p>
</template>

<script setup>
const props = defineProps(
    ["name", "url"]
)

</script>

<style lang="scss" scoped></style>

Footer.vue

html 复制代码
<template>
    <h2>footer</h2>
    <p>User: {{ user }}</p>
    <p>Url: {{ url }}</p>
</template>

<script setup>
const props = defineProps({
    user: Number,
    url: {
        type: String,// 这里可以设置类型
        required: true,// 这里可以设置必填项
        default: 'default url'// 这里可以设置默认值
    }
})
console.log(props.user)
console.log(props.url)
</script>

<style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴6 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust6 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放6 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝7 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele8 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试