Vue3.x父子组件事件交互与参数传递深度解析-优快云博客

文章目录

- - 回忆vue2.x
  - vue3.x组件事件探究

回忆vue2.x

在2.x时代，我们是通过 event.$emit 和 event.$on, event.$off去在父子组件、兄弟组件中去传递事件

vue3.x组件事件探究

1 在父子组件中控制事件
比如：通过子组件控制父组件的属性

<body>
    <div id="app">
        <demo @child-Click="x++"></demo>
        {{x}}
    </div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                x:1
            }
        }
    })
    app.component('demo', {
        template: `<button  @click="$emit('childClick')">请点击我</button>`,
    })
    app.mount("#app")

我们在子组件中写了一个@click="$emit(‘childClick’)",然后在父组件那里通过@child-Click="x++"去接收，就能够通过点击子组件的按钮来控制父组件中x元素的自增长了。这里需要注意的是，在子组件中，childClick在父组件中需要写成child-Click；命名规则这样规定的。
当然咯，也可以传值过去
在这里插入图片描述这样0.2在点击的时候，就会通过 $event传递到父组件中了
当然咯，我们可以把 $emit单独抽离出来，进行验证。
在这里，我们点击按钮时，就会对输入的类型进行验证了。