Vue组件传值

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>