vuejs:v-if事件指令

vuejs: v-if directive for event?

本文关键字：指令 事件 v-if vuejs      更新时间：2023-09-26

我可以对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>

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

  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')
  }
}

您应该避免使用$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)
  }
}

事件的全部思想是您可以对它们做出反应。但你希望反应通过模型。您真的不希望不相关的标记部分"独立"地侦听和响应$不赞成使用dispatch。要立即执行此操作，请执行以下操作。。。

在子组件中，发出如下事件

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

在父级中，使用v-on注册事件侦听器，作为子级标记的属性。。。

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

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

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

文件在这里。

相关文章：