vue组件传值

场景一：父组件给子组件传值：【直接传递】

在父组件调用自组件的地方，添加一个自定义属性，属性的值就是父组件要传递给子组件的值，子组件通过props接收父组件传递过来的值，属性名在父组件里自定义的属性名。

场景二：子组件给父组件传值（父组件接收子组件的值，需要子组件事件触发才能传递）【子组件被动传递】

不推荐使用，如有场景需要子给父传值，用状态管理器会更好

子组件定义一个触发事件，里面装着this.$emit("xxx",val); "xxx"是父组件引用子组件的地方自定义的事件名，例如：@my-event="getData"，getDate函数定义在父组件的里面，通过getData(val){ console.log(val); }此时的val就是子组件传递给父组件的值。

场景三:非父子之间的传值（兄弟组件）

使用中央事件总线其实就是vue的实例传播，接收数据的一方接听自定义的事件，发送方通过$emit的方式触发自定义事件，并且传递数据

不推荐使用，如有场景需要子给父传值，用状态管理器会更好

案例

案例

场景四:子组件直接使用父组件的事件或方法

不推荐使用，打个比方，儿子都没和爸爸打个招呼就拿钱要挨打的，还是让爸爸主动给（第一种方式传值方式推荐【父给子传值】）

通过 $parent 拿到父组件的实例，使用时候，$parent.变量 、$parent.方法

场景五：父组件直接使用子组件的数据和方法（常用）

父组件可以通过this.$ref获取到子组件的实例，在父组件调用子组件的地方子组件处，加上ref，例如：<child ref="test"></child>

场景六：provide+reject

provide+reject主要用于开发高阶插件/组件库时候使用，普通的应用程序中不推荐

案例