组件间通讯相关

 

父子组件间通讯:

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. 父组件传递 

posted @ 2021-09-03 17:31  ming-os9  阅读(36)  评论(0编辑  收藏  举报