<!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;
}
VUE 简单父子组件,兄弟组件弹窗通信练习
最新推荐文章于 2024-07-17 15:53:25 发布
本文介绍了如何在Vue中通过$emit和$on实现父子组件及兄弟组件之间的通信,提供了具体的练习案例。
摘要由CSDN通过智能技术生成