Vue3组件进阶--emit

2022-10-02 16:38:42 浏览数 (1)

tips:

1.父组件可以使用 props 把数据传给子组件。

1.子组件可以使用 $emit 触发父组件的自定义事件。

代码实例:

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>
    <div id="app">
        <app-aaa @abc="pfn"></app-aaa>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    "msg":"hello"
                }
            },
            "methods":{
                pfn(){  //父组件自定义事件
                    alert(1)
                }
            },
            "components":{
                "app-aaa":{
                    "emits":{
                        "abc":function(){
                            alert(2)
                        }
                    },
                    // 子组件中用&emit触发父组件的自定义事件
                    "template":
                    `
                    <button @click='$emit("abc")'>  
                        发射事件
                    </button?
                    `
                }
            }
        }).mount("#app")
    </script>
</body>
</html>

点击发射事件按钮,效果如下:

发射事件效果发射事件效果

0 人点赞