首页> 基础笔记 >Vue学习笔记 >组件组件

vue组件之间传递数据--props属性

作者：小萝卜 2024-03-12 【 Vue 】浏览 94

简介组件与组件之间不是完全独立的，而是有交集的，也就是组件与组件之间是可以相互传递数据的。数据传递的方案就是props，一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props

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

数据传递的方案就是props。

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props

Props 声明

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

在没有使用 <script setup> 的组件中，prop 可以使用 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

Props 使用

1、在父级组件中定义数据：

<template>
    <!--使用组件-->
	<ComponentA  title="标题" :age="age"/>
</template>

<script>
    //引入组件
	import ComponentA from './componentA.vue'
	export default {
		data() {
			return {
				age:20
			}
		},
		components: {
		    // 局部注册组件
			ComponentA
	    }
	}
</script>

2、在子组件中接收数据：

<template>
	<h3>父级的标题：{{title}}</h3>
	<h4>父级的age:{{age}}</h4>
</template>

<script>
	export default{
		
		//方式1
		//props:['title','age']  
		
		//方式2
		props:{
			title:String,
			age:Number
		},
		
		//注意：props传递数据只能从父级传给子级，子级props接收的数据是只读的，不能在对数据操作
	}
</script>