Props 父传子
父组件内
<template>
<Son :list='xxx'/>
</template>
<script>
import Son from './Son'
export default{
*注册组件
components:{Son}
}
</script>
子组件内
<template>
<p>{{list}}</p>
</template>
<script>
export default {
props: ["list"],
</script>
组件传参校验 写成对象模式
Vue.component('demo',{
props:{
list:String,
list:[String,Number]
list:{
type:Array,
default:function(){
return[]
} ,
list:{
type:Number,
required:true
}
}
}
})
//
default 默认值
required;true 是否必须传入
$emit 子传父
父组件
<template>
<Son @passFather='getSon' />
</template>
<script>
import Son from './Son'
export default{
components:{Son},
methods:{
getSon(a){ a //接收的值
console.log(a)
}
}
}
</script>
子组件
<template>
<button @click='clickHanlder'></button>
</template>
<script>
export default{
methods:{
clickHanlder(){
this.$emit('passFather',(a)) a传递的值
}
}
}
</script>
中央事件总线(万能)
在 main.js中
Vue.prototype.$bus = new Vue()
A组件内
<template>
<button @click="clickHandler"></button>
</<template>
<script>
export default{
methods:{
clickHandler(){
this.$bus.$emit('passB','发送给B')
}
}
}
</script>
B组件内
<template>
<P>{{getA}}</p> //发送给B
</<template>
<script>
export default{
data(){
return{
getA:''
}
}
mounted(){
this.$bus.$on('passB',function(val){ // val = 接收的值 = '发送给B'
this.getA = val
})
}
}
</script>