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>

我试过两次都没有成功。

此外，虽然我在这里，是否有一种表达方式在一定时间后隐藏元素？像（在2s之后隐藏）的东西：

<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

是的，你可以，但你需要采取这种方法。

创建一个调度事件的子项
在父组件中为事件创建事件侦听器，并为事件侦听器在组件实例上本地设置的数据属性创建
在父级中将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') } }

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

由于调度一直到达侦听器，您可以在父节点和子节点之间分配几个嵌套组件来调度警报控件

<强>更新

或者，由于您不喜欢使用事件的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-on注册事件侦听器，作为子级标记的属性...

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

然后，在父方法中，定义你的处理程序。

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

文档为here。

vuejs：v-if事件指令？

2 个答案: