【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

相关推荐
Spider_Man1 分钟前
React组件通信与Redux状态管理完全指南
前端·javascript·redux
我想说一句16 分钟前
React Router奇幻漂流记:懒加载、鉴权与404大冒险
前端·javascript·前端框架
Jinxiansen021123 分钟前
TypeScript 中的内置工具类型(Utility Type)
javascript·ubuntu·typescript
koooo~24 分钟前
JavaScript 与 C语言基础知识差别
c语言·开发语言·javascript
止观止26 分钟前
深入学习前端 Proxy 和 Reflect:现代 JavaScript 元编程核心
前端·javascript·学习
ChongYu重玉28 分钟前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
薛定谔的算法33 分钟前
猜你想不到SPA相比于传统页面的6个特点
前端·javascript·react.js
3Katrina39 分钟前
《解锁现代Web开发:SPA核心原理与性能优化实战》
前端·javascript
Attacking-Coder1 小时前
前端面试宝典---项目难点2-智能问答对话框采用虚拟列表动态渲染可视区域元素(10万+条数据)
开发语言·前端·javascript
kirinlau1 小时前
JavaScript中Object.defineProperty的作用和用法以及和proxy的区别
javascript·ecmascript