Vue 组件传值

163 阅读1分钟
            classDiagram
            组件传值 <|-- 子组件传父组件
            组件传值 <|-- 父组件传子组件
            组件传值 <|-- 非父子组件传值

一.子组件传父组件

1.1 父组件

image.png

1.2 子组件 image.png

思路

子组件写点击事件,事件通过 this.$emit 触发 子传父  父组件 通过@符接收 子组件传过来的事件名

二.父组件传子组件

1.父组件

image.png

2.子组件 image.png

思路

父组件定义组件 标签里面动态传值,子组件用 ‘props’ 接收

三.非父子组件传值

image.png

image.png

image.png

思路: 通过bus公共变量 利用 $emit 传递 给 兄弟A ,兄弟B利用  $on 接收