鍍金池/ 問(wèn)答/HTML/ vue子組件是一個(gè)遮罩，遮罩上面是個(gè)彈框，我點(diǎn)擊彈框上面的x，可以關(guān)閉這個(gè)遮罩嗎

vue子組件是一個(gè)遮罩，遮罩上面是個(gè)彈框，我點(diǎn)擊彈框上面的x，可以關(guān)閉這個(gè)遮罩嗎

父組件里設(shè)置了點(diǎn)擊按鈕，點(diǎn)擊按鈕會(huì)彈出另一個(gè)頁(yè)面，就是遮罩頁(yè)面，遮罩頁(yè)面上面有個(gè)彈框，當(dāng)我點(diǎn)擊彈框上面的x的時(shí)候，可以退出這個(gè)彈框嗎？？

回答
編輯回答
生性

功能組件，應(yīng)該由調(diào)用方?jīng)Q定這個(gè)組件是顯示還是隱藏。它只管發(fā)出事件，調(diào)用方做相對(duì)應(yīng)的響應(yīng)就好。

2017年9月23日 16:49
編輯回答
有你在

可以 看你點(diǎn)擊按鈕是通過(guò)v-show來(lái)顯示的 還是通過(guò)路由

可通過(guò)自定義事件，讓子組件修改父組件的變量
demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
  <div id="app">
    父組件的值：{{test}}
    <child v-on:posttoparent="change"></child>
</div>

    <template id="child">
        <div @click="toggle">{{test}}點(diǎn)擊我改變父組件的值</div>
    </template>
    
    <script>
        var child = Vue.extend({
            template:'#child',
            props:['test'],
            methods:{
                toggle(){
                    this.$emit('posttoparent',false)
                }
            }
        });
        var app = new Vue({
            el:'#app',
            data(){
                return{
                    test:true
                }
            },
            components:{child},
            methods:{
                change(val){
                    this.test = val;
                }
            }
        })
    </script>
</body>
</html>
父組件
<up-load v-show="isUp" v-on:showChanged ="change"></up-load>
change(show){
    this.isUp = show
}

子組件
uptoggle(){
    this.$emit("showChanged","false")
}
2017年2月4日 15:32
編輯回答
有點(diǎn)壞

類似的，也可以用 .sync

父組件
<up-load v-show="isUp" :visible.sync="isUp"></up-load>
加一個(gè)按鈕

uptoggle(){

    this.isUp = !this.isUp
  }


子組件
uptoggle(){
    this.$emit("update:visible", false)
}
2017年1月27日 06:38