vue 父子组件通信 兄弟组件通信

父子组件，兄弟组件之间传值比较适合组件层级比较简单的结构。层级较深可以使用状态管理vuex、pinia。

• 父子组件传值：使用props属性来接收父组件的传值。
• 子父组件传值：使用$emit方法向父组件传值。

父组件向子组件传值

在组件上定义属性，组件上的属性就是要传递给子组件的数据，子组件在props中接收，然后使用。

// fa.js 
<Notice message="props 传递给子组件的message"/>

// son.js 子组件接收message属性的值
<template>
    <div>
        Notice {{$props.message}}
    </div>
</template>

<script>
export default {
    props:{
        message:{
            type:String,
            required:true
        }
    }
}
</script>

子组件向父组件传值

子组件使用this.$emit事件向父组件传递值。父组件上通过事件来接收。

//fa.js 
<Notice message="props 传递给子组件的message" @show="handleClick"/>

//son.js 子组件接收message属性的值
<template>
    <div>
        Notice {{$props.message}}
    </div>
</template>

<script>
export default {
    props:{
        message:{
            type:String,
            required:true
        }
    },
    data(){
        return {}
    },
    methods:{
        handleClick(){
            this.$emit('show' ,1)
        }
    }
}
</script>