子向父通信

emit(子)、@(父)

vue2 Options API

子组件中

<script>
    export default {
        methods: {
            sendMsg() {
                let flag = true;
                this.$emit('flag', flag);  //只需一行
            }
        }
    }
</script>

父组件中

<template>
    <div>
        <Son @flag="getMsg">
    </div>
</template>
<script>
import Son from '../components/son/index'
export default {
    components: { Son }
    methods: {
        getMsg(val) {
            console.log(val)
        }
    }
}
</script>

vue3 Compositions Api

vue建议我们：在组件中所有的emit事件都能在组件的emits选项中声明。

emits: ['one','two','more']

子组件中

<script>
    export default {
        emits: ['ok']   //注册emits
        setup(props, { emit }) {
            const addList = () => {
                let flag = true
                emit('ok', flag)    //使用emit
            }
            return {
                addList
            }
        }
    }
</script>

// 语法糖写法
<script setup>
const emit = defineEmites(['flag'])
cosnt sendMsg = () => {
    let flag = true
    emit('flag',flag)
}
</script>

父组件中

<template>
    <div>
        <Son @ok="getMsg" />    //绑定子组件的ok
    </div>
</template>

<script>
import Son from '../components/son/index'
    export default {
        components: { Son },
        setup() {
            const getMas = val => {
                console.log(val)
            }
            return {
                getMsg 
            }
        }
    }
</script>

// 语法糖写法
<script setup>
import Son from '../components/son/index'
components: { Son },
const getMas = val => {
    console.log(val)
}
</script>

父向子通信

props(子)、:(父)

vue2 Options API

父组件

<template>
    <div>
        <Son :getMsg="sendMsg"/>
    </div>
</template>
<script>
import Son from './son.vue'
export default {
    components: { Son },
    methods: {
        sendMsg() {
            let flag = true
            return flag
        }
    }
}
</script>

子组件

<script>
    export default {
        props: {
            getMsg: {
                type: Function,
                default: null
            }
        },
        mounted() {
            console.log(this.$props.sendMsg())
        }
    }
</script>

vue3 Compositions Api

父组件

<template>
    <div>
        <Son :getMsg="sendMsg"/>
    </div>
</template>
<script>
import Son from './son.vue'
export default {
    components: { Son },
    setup() {
        const sendMsg = () => {
            let flag = true
            return flag
        }
        return {
            sendMsg,
        }
    }
}
</script>

子组件

<script>
    export default {
        props: {
            getMsg: {
                type: Function,
                default: null
            }
        },
        setup() {
            onMounted(()=> {
                console.log(this.$props.sendMsg())
            })
            return {
            }
        }
    }
</script>