Vue3子组件向父组件传值

       子组件向父组件传值核心的部分是emit事件，子组件绑定一个emit触发事件，父组件监听事件就可以达到子组件向父组件传值的目的。

        这里我们编写一个计数器的案例。

     

       首先我们先展示子组件和父组件的代码：

<template>
    <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        <input type="text" v-model.number="num">
        <button @click="incrementN">+n</button>
        
    </div>
</template>

<script>
export default {
    emits:["add","sub","addN"],
    data() {
        return {
            num:0,
        }
    },
    methods: {
        increment(){
            console.log("+1");
            this.$emit("add");
        },
        decrement(){
            console.log("-1");
            this.$emit("sub");
        },
        incrementN(){
            this.$emit("addN",this.num);
        }
    },
}
</script>

<style scoped>
    
</style>

<template>
    <div>
        <h2>当前计数:{{counter}}</h2>
        <counter-operation @add="addOne" 
                           @sub="subOne"
                           @addN="addNnum"></counter-operation>
    </div>
</template>

<script>
import CounterOperation from "./CounterOperation.vue"
export default {
    data() {
        return {
            counter:0,
        }
    },
    components:{
        CounterOperation,
    },
    methods: {
        addOne(){
            this.counter++;
        },
        subOne(){
            this.counter--;
        },
        addNnum(num){
            this.counter+=num;
        }
    },
}
</script>

<style scoped>
    
</style>

       

       1.在template模板中放一个div当做根组件，然后写三个button按钮，在这里绑定一个鼠标点击事件然后在点击事件里触发emit事件进行向父组件的传值。

       2.在methods部分，分别对三个点击事件进行编写，这里打印了一下+1，-1，+n。然后同时在这里加入了emit触发事件，括号里的参数就是父组件要监听的触发事件，触发了括号里的事件父组件对其进行监听。所以还要在子组件部分对触发事件进行一个注册，在emits[]中进行注册。

       3.接下来就是要通过父组件添加监听来实现传值，父组件通过 @监听事件名称="触发的方法"来进行监听，父组件在methods部分对触发的方法进行编写，最终体现在前端页面上。

       总结下来，可以理解成父子组件中间有一个桥梁就是emits["add","sub","addN"]这三个触发事件，子组件进行注册，父组件对这个桥梁进行监听，一旦触发就执行相应的函数，从而改变前端界面展示的数据。