<vue 组件 2、组件参数传递>

代码结构

一、 01-父组件向子组件传递数据

1、效果

展示出来的数据都是父组件传给子组件的数据

2、代码

01-父组件向子组件传递数据.html



	
		
		Title

二、 02-父传子(props中的驼峰标识)

1、效果

2、代码

02-父传子(props中的驼峰标识).html



	
		
		Title

三、03-子传父(自定义事件)

1、效果

点击后将父组件的参数，传递给子组件并展示

2、代码

03-子传父(自定义事件).html



	
		
		Title
	
	

		
		

			
				父组件调用子组件
				
			

			
                父组件展示子组件传来的参数
				{{book}}

四、04-子组件改父组件参数

1、效果

2、代码

04-子组件改父组件参数.html



	
		
		Title
	
	

		
			
				父组件的参数num1 ：{{num1}}

五、05-watch实现子组件改父组件参数

1、效果

子组件数值改变后，父组件的数据跟着改变，效果和上一个例子一样只是这里实现使用的是watch方法

2、代码

05-watch实现子组件改父组件参数.html



	
		
		Title
	
	

		
			
				父组件的参数num1 ：{{num1}}

vue

<vue 组件 2、组件参数传递>

代码结构

一、 01-父组件向子组件传递数据

1、 效果

2、代码

{{cmessage}}

二、 02-父传子(props中的驼峰标识)

1、 效果

2、代码

{{cInfo}}

{{cInfo.name}}

{{cInfo.age}}

{{cInfo.height}}

{{childMyMessage}}

三、03-子传父(自定义事件)

1、效果

2、代码

四、04-子组件改父组件参数

1、效果

2、代码

父组件的参数num1 ：{{num1}}

子组件的参数：

props:{{number1}}

data:{{dnumber1}}

五、05-watch实现子组件改父组件参数

1、效果

2、代码

父组件的参数num1 ：{{num1}}

子组件的参数：

props:{{number1}}

data:{{dnumber1}}

相关

1、效果

1、效果