【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

相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色10 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊10 小时前
react中为啥使用剪头函数
前端·javascript·react.js