父组件传参给子组件 props 传参
1、子组件标签上绑定参数
// :属性名="属性值"
<child :name="" />
2、子组件中使用props接收参数
export default {
name: '',
data(){
},
props:{
name: {
type: Number, //类型不匹配会警告
default: 0, // 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值
required: true, // 定义该 prop 是否是必填项
// 自定义验证函数、 返回值不是 true,会警告
validator(val) { return val === 10}
}
}
}
// 简单写法 [ 参数名,参数名........... ]
props:[ "name",...,...... ]
子组件传参给父组件 $emit( )
// 子组件
methods:{
toFather(){
// 传参 第一个参数是绑定的函数名，第二个是要传的参数
this.$emit("toFather",{name:90})
}
}
// 父组件
<child :name="name" @toFather="fn1" />
methods:{
fn1(event){
console.log(event)
}
}
EventBus 全局组件传参
1、挂载 EventBus
Vue.prototype.$EventBus = new Vue()
2、调用和监听
// 组件1
<button @click="toEventBus">EventBus组件传参</button>
toEventBus(){
this.$EventBus.$emit("fn2",{age:20})
}
// 组件2
mounted(){
// 监听
this.$EventBus.$on("fn2",(event)=>{
console.log(event)
})
}
