一、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中