您的位置：首页 > 产品设计 > UI/UE

vue组件4-props传参2

2017-07-11 11:27 288 查看 
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航