父子间通过事件进行通信

@huihui_new

于 2021-03-04 20:24:37 发布

阅读量91

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_52544128/article/details/114081424

版权

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 18</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return { count:1 }
        },
        methods: {
            handleAddOne() {
                this.count += 1;
            }
        },
        template:`
            <div @handle=""><counter :count="count" @handle-click="handleAddOne" /></div>
        `
    });
    
    app.component('counter',{
        props:['count'],
        emits:{
            handleClick: (count)=>{
                if(count > 0) {
                    return true;
                }
                return false;
            }
        },
        methods: {
            handleClick() {
                this.$emit('handleClick');
            }
        },
        template:`
            <div @click="handleClick">{{count}}</div>
        `
    });
    app.mount('#root');
</script>
</html>