vue中父组件必须给子组件传值,required必加属性

当父组件给子组件传递属性时,我们可以在子组件接受属性的时候,加上一个必加属性required:true。代码演示:
1.先在父组件中设置需要传递给子组件的值:

 return{
	  propB:['name','lalisa']
  }

2.在父组件中挂载和使用子组件并把属性传递给子组件:

<about :propB='propB'></about>

3.在子组件中接收父组件传递来的属性

props:{
			propB:{
				type:Array,
				required:true
			}
		}
		/** 这里的type是设置传递过来属性值的类型,如果没加type,那么无论propB是什么数据类型都会显示,
		且程序不会报错,但是如果加了type,例如现在的type:Array,就是说传递过来的属性值的数据类型必须为数组,
		不然会报错。当然了,这里就算会报错,但是该显示的数据依旧会显示,不过就是有报错。当然这里type的值可以有多个,
		例如type:[Array,Object],这样就是说你传入值的数据类型可以是对象也可以是数组**/
		/**
	这里的requires是必加属性,例如,我们这里加入了required:true。就是说这里的propB必须要要给属性值。也就是上面 2.里面的代码必须有
**/
	

4.在子组件中使用传入过来的值

<h2>propB:{{propB}}</h2>

5.那么此时的效果就是:
vue中父组件必须给子组件传值,required必加属性_第1张图片

6.如果在父组件中没有给子组传递属性,此时子组件中的代码不变,父组件中的代码是这样的:

<about></about>

7.这样程序就会报错,
vue中父组件必须给子组件传值,required必加属性_第2张图片

8.如果没有加 required:true,那么就算父组件没有给子组件传值,子组件也就是空,不会报错,代码执行效果:
vue中父组件必须给子组件传值,required必加属性_第3张图片

你可能感兴趣的:(笔记,vue)