父组件向子组件传值
父向子
父组件上边,在要接受数据的组件上通过动态属性传递
如
:data="data"
子组件通过props属性接受
1.数组
props:['title','count','imgs','styles'],
2.对象
属性名类型 Object | Array | String | Numeber | Boolean | Function
props:{
title:Array,
}
props:{
属性名:{
type:类型,
required:必填项,默认值为false,
defalult:默认值,(如果是简单值的话,直接设置,如果是数组或者对象的话,需要一个函数),
validator(val){
自定义格式的验证,函数return 成立
}
}
}
vue 是单向数据流,不能在子组件里面直接修改父组件传递过来的值
子向父
子组件里边使用$emit
$emit('事件名称','实参1','实参2')
<button @click="$emit('addCount',count)"></button>
@事件名称 = "事件处理程序"
父组件接受的方法
@addCount = "方法名"
在methods方法里面写函数
addCount(){
console.log(1)
}
非父子
3通过创建一个空对象
在 main.js 里面Vue.prototype.$bus=new Vue()
所有的组件都是通过vueComponent 实例出来的 vueComponent继承vue
子组件
传参的方式: this.$bus.$emit('add',item)
在created方法里面接受
this.$bus.$on('add',(obj)=>{
console.log(obj)//传过来的参数值
})