javascript - vuejs : v-if directive for event?

Question

我可以对 vue 模板中的事件使用react吗？假设一个子组件调度了一个事件 $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. 创建一个调度事件的 child
2. 在父组件中为事件创建事件监听器以及事件监听器将在组件实例本地设置的数据属性
3. 在父级中将你的 v-if 绑定(bind)到本地数据组件

代码看起来像

parent

HTML

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

Js

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

child

Js

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

你应该避免使用 $child 和 $parent 的原因是它使该组件始终依赖于父组件将具有 alert 属性并使子组件免于模块化的事实

由于调度上升直到它到达一个监听器，你可以在父子之间有几个嵌套组件来调度警报控件

更新

或者，由于您不喜欢使用事件的 LOE，您可以在子对象上创建一个父对象或子对象都可以更新的 2-way 属性

例子

父级

HTML

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

JS

data () {
  return {
    showAlert: false
  }
}

child

js

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