组件间通讯相关

 

父子组件间通讯：

1.props  和 emit 这个就不说了，比较简单 （ 父组件传递:bar="bar"，子组件接收 props:{ bar,}）

2.  v-bind="$attrs"  &  v-bind="$props"  &  v-on="$listeners"

　　1.v-bind="$props" 可以将父组件的所有props下发给它的子组件，子组件需要在 props:{}中定义要接受的props

　　2.v-bind="$attrs" 将父组件标签上绑定的非子组件中props:{}接受的向下传递给孙组件 

　　3.v-on="$listeners" 将父组件标签上自定义的事件下发，子组件可以直接用 this.$emit(eventName)调用

index.vue

<template>
    <div>
        <son :aaaa="aaaa" :bbbb="bbbb" :cccc="cccc" @xxxx="func"/>
    </div>
</template>
<script>
    ...
    data:{
        aaaa:'11',
        bbbb:'22',
        cccc:'33'
    }
    ...
</script>

 

　　son.vue

//子组件  
<template>
<div>
    <grandSon v-bind="$attrs" v-on="$listeners"/>
<div>
</template>
<script>
    ...
    props:{
        aaaa:{
            type:String,
            default:''
        }
    }
    ...
</script>

 

　　grandSon.vue

//孙组件
<template>
    <div >接受的index.vue的attrs参数：{{attrs}}</div>
    <div>{{bbbb}} {{cccc}}</div>
　　<div @click="handleClick">点击触发父组件xxxx事件</div>
</template>
<script>
 ...
props:{
    bbbb,
    cccc
},
 methods:{
    handleClick(){ this.$emit('xxxx')}
 }
 ...
</script>

 

　　结果 

接受的index.vue的attrs参数：{bbbb:'22',cccc:'33'}
22 33

点击触发父组件xxxx事件

3. 父组件传递