vue学习笔记21-组件传递数据

本文链接：https://blog.youkuaiyun.com/nicooooooooooooo/article/details/136591164

本文介绍了在Vue.js中，组件之间如何通过props进行数据传递，包括基本的props定义、父子组件之间的数据交互以及动态数据的传递。特别强调了props数据只能从父组件单向传递给子组件的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的

传递数据的解决方案就是props

父级：

在父级中引入子集

<template>
    <h3>Parent</h3>
    <Child/>
</template>

<script>
import Child from "./Child.vue"
export default {
    data() {
        return{
            
        }
    },
    components:{
        Child
    }
}
</script>

而父级在App里引入

<template>
 
  <Parent/>
  
</template>

<script>

import Parent from "./components/Parent.vue"

export default {
  components:{
    
   Parent
  }
}
</script>

<style>

</style>

父级将数据传送给子集，在父级中<Child title="Parent数据"/>写出如下代码

而在子级组件中，如下编写

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <!-- 用模板语法的方式让其显示 -->
</template>

<script>
export default {
    data() {
        return{
            
        }
    },
    props:["title"]//在这里以字符串形式存在
}
</script>

成功传入

当然也可以传递多个数据，且传递的数量没有限制

父级中

子集中

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <p>{{ demo }}</p>
    <!-- 用模板语法的方式让其显示 -->
</template>

<script>
export default {
    data() {
        return{
            
        }
    },
    props:["title","demo"]//在这里以字符串形式存在
}
</script>

动态数据传递

通过下面代码就可以实现动态数据传递

<template>
    <h3>Parent</h3>
    <Child :title=" message" />
    <!-- v-bind把后面变成动态的数据 -->
</template>

<script>
import Child from "./Child.vue"
export default {
    data() {
        return{
            message:"Parent数据!"
        }
    },
    components:{
        Child
    }
}
</script>

成功