vuejs2で自己のダイアログを閉じる方法は？

Question

私はダイアログコンポーネントを作成していますが、自分でダイアログを閉じる方法はわかりません。

<template> 
    <div class="dialog" v-show="visible"> 
    ... 
    <button @click="close">Close</button> 
    </div> 
</template> 
<script> 
    { 
    props: {visible: {type: Boolean, default: false}}, 
    methods: { 
     close() { 
     // this.visible = false //It will get vue warn 
     } 
    } 
    } 
</script> 

だから、私のコンポーネントで、ダイアログを閉じるにはどのように、私はvisible小道具を更新することはできません、私はエラーを取得します。

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" 

Answer 1

小道具がone way data flow

あるあなたは小道具だから親コンポーネント自体

<template> 
    <div class="dialog" v-show="visible"> 
    ... 
    <button @click="close">Close</button> 
    </div> 
</template> 
<script> 
    { 
    props: {visible: {type: Boolean, default: false}}, 
    methods: { 
     close() { 
     // this.visible = false //It will get vue warn 
     this.$emit('close-dialog') 
     } 
    } 
    } 
</script> 

に小道具を変異させるcustom eventを発する子コンポーネント

に親コンポーネントから受信した変異させるべきではありません親コンポーネント

<template> 
    <div> 
    <my-dialozg @close-dialog="visible = false" :visible="visible"><my-dialog> 
    </div> 
</template> 

ダイアログコンポーネントにイベントリスナーclose-dialogを設定し、を小道具としてfalseに渡すように設定します。上記のようにインラインで実行することも、メソッドに展開することもできます

Answer 2

vuejsでは、子コンポーネントは親プロパティを直接変更できません。

イベント/イベントリスナーを使用できます。しかし、あなたの例はシンプルなので、イベントは必要ありません。

デモ：https://jsfiddle.net/samayo/943bx5px/28/

代わりに、あなたは:visisble="visible"としてコンポーネントに見える小道具を渡すことができますとしての状態変化を見る：visisbleが親からfalseに切り替えられる場合には、今

watch: { 
    visible (val) { 
    if(!val) { 
     // close 
    }else{ 
     open 
    } 
    } 
} 

、あなたのモーダルは見えません。