【vue】defineProps 传数据父传子

最新推荐文章于 2024-05-19 22:53:26 发布

tao355667

最新推荐文章于 2024-05-19 22:53:26 发布

阅读量506

点赞数 4

分类专栏： # Javascript基础+Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_63070489/article/details/137710880

版权

Javascript基础+Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何使用`reactive`创建响应式数据，以及在App.vue中通过props从Header.vue和Footer.vue组件间传递值的过程。实例代码展示了父子组件之间的通信和数据更新机制。

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

先行知识

【vue】导入组件

在这里插入图片描述

传值过程

在这里插入图片描述

App.vue

<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

<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

<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>