VUE3之Component（一）

子组件传递给父组件

子组件传递给父组件:通过$emit触发事件;

首先需要先在子组件中定义要出发的事件：

<script>
    export default {
        // 数组写法
        // emits:["add","sub","addN"],
        // 对象写法的目的是为了进行参数的验证
        emits:{
            add: null,
            sub: null,
            addN: (num,name,age) =>{
                console.log(num,name,age);
                if (num>10){
                    return true;
                }
                return false;
            }
        }
</script>

在子组件中为按钮设置监听，在方法中触发事件传递给父组件：

<template>
    <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>

<script>
    export default {
        methods: {
            increment(){
                console.log("+1");
                this.$emit("add");
            },
            decrement(){
                console.log("-1");
                this.$emit("sub");
            }
        },
    }
</script>

在父组件中监听子组件的事件，并作出处理：

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

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

在自定义的事件中，还能够传递参数：

// 子组件
<template>
    <div>
        <input type="text" v-model.number="num">
        <button @click="incrementN">+n</button>
    </div>
</template>

<script>
    export default {
        // 数组写法
        // emits:["add","sub","addN"],
        // 对象写法的目的是为了进行参数的验证
        emits:{
            add: null,
            sub: null,
            addN: (num,name,age) =>{
                console.log(num,name,age);
                if (num>10){
                    return true;
                }
                return false;
            }
        },
        data(){
            return{
                num:0
            }
        },
        methods: {            
            incrementN(){
                console.log("add",this.num);
                this.$emit("addN",this.num,"sk",18);
            }
        },
    }
</script>

// 父组件
<template>
    <div>
        <h2>当前计数{{counter}}</h2>
        <counter-opetation 
            @add="addOne" 
            @sub="subOne"
            @addN="addNNum">
        </counter-opetation>
    </div>
</template>

<script>
import CounterOpetation from "./CounterOperation.vue";
    export default {
        components:{
            CounterOpetation
        },
        data(){
            return {
                counter:0
            }
        },
        methods: {
            addNNum(num,name,age){
                this.counter+=num;
            }
        },
    }
</script>