Vue props向子组件中传递数据

Posted 2020-12-19 wjw1014

Vue props向子组件中传递数据

声明组件对象中定义 props

1、在声明组件对象中使用 props 选项指定

const MyComponent = {
	template:‘<div></div>‘,
	props: 此处值有以下3中方式,
	components:{
	}
}

方式一：指定传递属性名，注意是数组形式。

props:[‘id‘,‘name‘,‘sarlary‘,‘isPublished‘] 

方式二：指定属性名和数据类型，注意是对象形式。

props:{
	id:Number,
	name:String,
	salary:Number,
	isPublished:Boolean,
	commentIds:Array,
	author:Object,
	getEmp:Function
}

方式三：指定属性名、数据类型、必要性、默认值。

props:{
	name:{
		type:String,
		required:true,
		default:‘wjw‘
	}
}

引用组件时动态赋值

在引用组件时，通过 v-bind 动态赋值

<my-component v-bind:id="2" :name="wangjiawei" :salary="9999" :is-published="true" :comment-ids="[1,2]" :author="{name:‘alan‘}" :get-emp="getEmp">
</my-component>

传递数据注意

1. props 值用于父组件向子组件传递数据。
2. 所有标签属性都会成为组件对象的属性，模板页面可以直接引用。
3. 问题：
   a. 如果需要向非子后代传递数据，必须是多层逐层传递。
   b. 兄弟组件间也不能直接 props 通信，必须借助父组件才可以。