本文共 681 字，大约阅读时间需要 2 分钟。

vue使用中，经常会用到组件，好处是：

1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了； 2、页面内容会简洁一些；方便管控； 子组件的传值是通过props来传递数据，$emit来触发事件。

一、父传子值，父调用子方法

1、父组件向子组件传值（引入子组件→在引入的子组件绑定需要传送的值→子组件props接收）

2、父组件调用子组件方法（引入子组件→给注册的子组件注册引用信息→调用子组件方法）

二、子传父值，子调用父方法

1、子组件向父组件传值 方法一：

方法二：

父组件直接获取子组件里的data数据this.$ref.child.msg

2、子组件调用父组件方法

方法一：

子组件直接通过this.$parent.event调用 //event为需要调用的父组件的事件

方法二：

子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了（与子组件向父组件传值（方法一）一致）

方法三：

父组件把方法传入子组件中，在子组件里直接调用这个方法
   
   

如果数据不明确数据是否接收，可以设置watch监听传值变化。

watch: {
       msg(newValue, oldValue) {
       console.log('父组件动态更新值：', newValue)    }  }

转载地址：http://imlbi.baihongyu.com/