sách gpt4 ăn đã đi

javascript - vuejs : v-if directive for event?

In lại 作者:搜寻专家 更新时间:2023-10-30 22:35:37 25 4
mua khóa gpt4 giày nike

我可以对 vue 模板中的事件使用react吗?假设一个子组件调度了一个事件 $dispatch('userAdded'),我可以在父组件中做这样的事情吗:


User was created!

或者,如果不能,我可以访问子组件的变量吗?


User was created!

我都试过了,都没有成功。

此外,当我在这里时,是否有一种表达方式可以在一定时间后隐藏元素?类似的东西(2 秒后隐藏):


User was created!

Cảm ơn!

biên tập: 编写了我自己的 hide-after 指令:

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


This will be shown for 2 seconds

câu trả lời hay nhất

是的,你可以,但你需要采用这种方法。

  1. 创建一个调度事件的 child
  2. 在父组件中为事件创建事件监听器以及事件监听器将在组件实例本地设置的数据属性
  3. 在父级中将你的 v-if 绑定(bind)到本地数据组件

代码看起来像

parent

HTML


Js

events: {
'alert.show': function () {
this.showAlert = true
},
'alert.hide': function () {
this.showAlert = false
}
},
data () {
trở lại {
showAlert: false
}
}

đứa trẻ

Js

phương pháp: {
showAlert (show) {
show ? this.$dispatch('alert.show') : this.$dispatch('alert.hide')
}
}

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

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

gia hạn

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

ví dụ

父级

HTML



JS

data () {
trở lại {
showAlert: false
}
}

đứa trẻ

js

đạo cụ: {
showAlert: {
type: Boolean,
twoWay: true
}
},
phương pháp: {
showAlertInParent (show) {
this.$set('showAlert', show)
}
}

关于javascript - vuejs : v-if directive for event?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38562170/

25 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress