11.子→父通信

最新推荐文章于 2024-04-03 00:00:00 发布

床懒

最新推荐文章于 2024-04-03 00:00:00 发布

阅读量144

点赞数

分类专栏： vue.js学习

本文链接：https://blog.csdn.net/qq_26703533/article/details/81459934

版权

vue.js学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<body>
<div id="sf">
<bod></bod>
</div>

//父
Vue.component('bod',{
    template:`
    <div>
    <show v-on:showing="showing=true"></show>
    <hide v-on:unshow="showing=false"></hide>
    <div v-if="showing">出现</div>
    </div>
    `,
    data:function () {
     return {
         showing:false,
     }
    }

});
//子
Vue.component('show',{
    template:'<button v-on:click="on_click()">显示</button>',
    methods:{
        on_click(){
            this.$emit('showing');
        }
    }
});
//子
Vue.component('hide',{
    template:'<button v-on:click="off_click()">隐藏</button>',
    methods:{
        off_click(){
            this.$emit('unshow');
        }
    }
})
new Vue({
    el:'#sf',
})