VUE 简单父子组件，兄弟组件弹窗通信练习

最新推荐文章于 2024-05-16 15:30:16 发布

荷兰豆叶子上的水熊

最新推荐文章于 2024-05-16 15:30:16 发布

阅读量983

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/u010200033/article/details/80266086

版权

本文介绍了如何在Vue中通过$emit和$on实现父子组件及兄弟组件之间的通信，提供了具体的练习案例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>component</title>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    </head>
    <body>
        <template id="child">
            <div class="childbox">
                <h2>我是子组件</h2>
                <div class="popup" v-if="show">
                    <h2>我是弹窗</h2> 
                    <input type="button"  value="隐藏" @click="change()" />
                </div>
            </div>
        </template>
        <div class="app">
            <h2>我是父组件</h2> 
            <input type="button" value="弹出"  @click="show =true"  :class="{active:show}" />
            <input type="button" value="隐藏"  @click="show =false" :class="{active:!show}" />
            <child :show ='show'  @parentevent="haha"></child>
            


        </div>
        <style type="text/css">
            .active{background-color: red;color:#fff;}
            .childbox{
                width: 500px;height: 500px;border:3px solid #ccc;
                margin:50px auto;
            }

最低0.47元/天解锁文章

荷兰豆叶子上的水熊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE 简单父子组件，兄弟组件弹窗通信练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;component&lt;/title&gt; &lt;script src="https://cdn
复制链接

扫一扫

专栏目录