Vue组件建立及组件之间的三种传递

一、Vue组件建立

app.vue中

二、组件传递

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1.父组件向子组件传值
先来看父组件情况
1、子组件的引入步骤

       import  子组件名  form '子组件所在路径'

2、当引入后我们在export default{进行引用}

compents:{

    子组件名，

}

再来看子组件情况
3.子组件中接收父组件的值
当父组件给子组件传值的时候，我们就要在props中接收值，

及最后效果图

二、子组件向父组件传值

在子组件中创建一个按钮，并绑定一个点击事件
子组件如图：
在js的methods中定义这个事件函数中使用$emit来触发一个事件并传递一个参数。

父组件：
在父组件中v-on监听这个事件（jieshou）并添加一个响应事件的方法


效果图：

三、同级组件之间的传值(创建一个公共js文件)

公共bus.js中

组件A中

组件B中