vue中父子双方组件如何像对方传递数据？

vue中父子双方组件如何像对方传递数据？

第一种是父组件像子组件传递数据

1.父组件需要子组件的地方要绑定子组件的数据和标签
比如说我们需要子组件music-list
那么父组件中要这么书写

<music-list ：songs=“songs” :title=“title”></music-list>

2.子组件中要设置slot插槽生命父组件在哪里进行dom渲染
外加提供接受数据的props

e.g.
export default {
    props:{
        songs:{
            type:Array,
            default:()=>[]
        },
        title:{
            type:String,
            default: ‘’
        }
    }
}

第二种是子组件像父组件传递数据
这个时候我们要使用$emit这个东西了
1.父组件要书写一个监听事件，在template里和methods里定义这个监听事件

e.g.
<child @jiantingMethod=“jaintingMethod”></child>
然后methods里
    method:{
        jiantingMethod(){
            console.log(‘laila’);
        }
    }

2.子组件要要为它想要传递给父组件的那个事件绑定一个$emit传给父组件

e.g.
<button @click=“传给爸爸()”></button>
然后methods里面书写$emit
e.g.
export default{
    methods:{
        传给爸爸(){
            this.$emit(‘jiantingMethod’);
        }
    }
}