vue组件4-props传参2-子元素通过$emit改变父元素中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传参5</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app1">
<parent></parent>
</div>
<script>
Vue.component('Dialog',{
template:'<div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div>',
props: ['isShow'],
methods: {
toHide(){
// $emit 方法触发父组件的监听事件
this.$emit('hide');
}
}
})
Vue.component('Parent',{
template:'<div class="parent"><Dialog :is-show="show" @hide="hideDialog"></Dialog><button @click="showDialog">显示弹框</button> </div>',
data() {
return {
show: false
}
},
methods: {
showDialog() {
this.show = true;
},
hideDialog() {
this.show = false;
}
}
})
new Vue({
el:"#app1",
})
</script>
</body>
</html>
