vue父组件和子组件数据传递

1、父组件向子组件传递数据

父组件：

子组件：

父组件向子组件传值方式：
1、父组件引入子组件，注册属性message
2、子组件通过props来获取到注册的属性message

页面显示：

 

2、子组件触发事件向父组件传递数据

父组件：

子组件：

子组件向父组件传值方式：
1、父组件注册事件event
2、子组件由transmit事件方法，通过$emit('', data)向父组件传值

页面点击子组件按钮可以获得以下效果：

 

3、父组件直接调取子组件数据

父组件：

子组件：

父组件直接获取子组件数据：
1、父组件引入子组件，添加ref属性
说明：ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册
2、父组件直接通过 this.$refs.child.属性 获取数据
说明：在父组件里面通过以下方式获取子组件的属性和方法
this.$refs.child.属性
this.$refs.child.方法

页面效果：

 

4、子组件直接调取父组件数据

父组件：

子组件：

父组件直接获取子组件数据：
1、父组件引入子组件
2、子组件直接通过 this.$parent.属性 获取数据
说明：在子组件里面通过以下方式获取子组件的属性和方法
this.$parent.属性
this.$parent.方法

页面效果：