vuejs：v-ifイベントのディレクティブ？

Question

vueテンプレートのイベントに反応することはできますか？子コンポーネントがイベント$dispatch('userAdded')を送出すると言う、私は親コンポーネントにこのような何かを行うことができます：

<div class="alert alert-info" v-if="userAdded"> 
    User was created! 
</div> 

か、そうでない場合、私は、子コンポーネントの変数にアクセスすることができますか？

<div class="alert alert-info" v-if="$refs.addView.form.successful"> 
    User was created! 
</div> 

私は両方とも成功しなかった。

また、私はここにいるのですが、一定の時間が経過しても要素を隠す表現方法はありますか？次のようなもの（2秒後に非表示にする）：

<div class="alert alert-info" v-if="$refs.addView.form.successful" hide-after="2000"> 
    User was created! 
</div> 

ありがとう！

編集：は自分hide-afterディレクティブ書いた：

Vue.directive('hide-after', { 
    update: function(value) { 
    setTimeout(() => this.el.remove(), value); 
    } 
}); 

<div class="alert alert-info" v-hide-after="2000"> 
    This will be shown for 2 seconds 
</div> 

Answer 1

はいすることができますしていますが、このアプローチを取る必要があります。

1. イベントのイベントリスナーもイベントリスナーが、親バインドでは、コンポーネントインスタンス
2. 上でローカルに設定するデータプロパティを作成し、親コンポーネントでイベント
3. を派遣子を作成します。あなたのV-IFローカルデータコンポーネントへ

は、コードが

親のようになります

HTML

<div v-if="showAlert"></div> 

のJs

events: { 
    'alert.show': function() { 
    this.showAlert = true 
    }, 
    'alert.hide': function() { 
    this.showAlert = false 
    } 
}, 
data() { 
    return { 
    showAlert: false 
    } 
} 

子供

のJs

methods: { 
    showAlert (show) { 
    show ? this.$dispatch('alert.show') : this.$dispatch('alert.hide') 
    } 
} 

あなたがusinを避けるべき理由$ childと$ parentは、そのコンポーネントが常に親がalertプロパティを持ち、子コンポーネントをモジュール化しないようにするということです。

リスナーに当たるまでディスパッチが上がるので、警報制御

UPDATE

代わりに、あなたは子供の2ウェイプロパティを作成することができ、イベントを使用してのLOEを好きではないので、どちらかの親を派遣親と子の間でネストされたコンポーネントまたは子供が更新することができます

例

親

HTML

<div v-if="showAlert"></div> 
<child-component :show-alert.sync="showAlert"></child-component> 

JS

data() { 
    return { 
    showAlert: false 
    } 
} 

子供

JS

props: { 
    showAlert: { 
    type: Boolean, 
    twoWay: true 
    } 
}, 
methods: { 
    showAlertInParent (show) { 
    this.$set('showAlert', show) 
    } 
} 

Answer 2

イベントの全体的なアイデアは、あなたがそれらに反応できることです。しかし、あなたはその反応がモデルを通り抜けたいと思っています。マークアップの無関係なビットを聞き、「独立して」反応することを本当に望んでいません。 $ dispatchは廃止予定です。親で

this.$emit('didIt' {wasItAwful:'yep',wereYouScared:'absolutely'}); 

を次のように子コンポーネントには、次の...

は、イベントを発するか、今これを行うには、の属性として、V-上でのイベントリスナーを登録します子供のタグ...

<adventure-seeking-child v-on:did-it='myChildDidIt' /> 

次に、親のメソッドで、ハンドラを定義します。

methods : { myChildDidIt : function(payload){ ... } } 

文書はhereです。