vuejs2 - Vuejs 调用 $refs

标签 vuejs2 vue.js

<div>
    <button @click="$refs.cart.open()">open</button>
    <drawer></drawer>
</div>

ref=购物车在里面<drawer> ,我可以用那个按钮打电话吗?怎么办?

---已编辑---

enter image description here

---edited solve with vuex---

根模板

toggle() {
    this.$store.dispatch('toggle', {
      toggle: 'close'
    }).then(() => {
      this.$store.dispatch('toggle', {
        toggle: 'open'
      })
    })
  }

抽屉内

computed: {
  toggle() {
    return this.$store.state.toggle
  }
},
watch: {
  toggle(val) {
    if (val == 'open') this.$refs.cart.open()
  }
}

最佳答案

一个简单的解决方案(不是最好的)是仅使用 Vue 事件总线在此处的组件之间进行通信。 Quasar 有一个全局事件总线 ( http://quasar-framework.org/api/js-events.html )。

最好的解决方案是使用 Vuex,但当然,如果您只是为此需要它,则不需要。

Vue 引用很棘手,并且并不总是可以使用。解释很长,并且与 Vue 的渲染方式有关。

关于vuejs2 - Vuejs 调用 $refs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41455758/

相关文章:

javascript - vuejs刷新后无法加载二级路由页面

javascript - 如何使用 JSFiddle 在浏览器中计算所有具有很大最大值的素数

vue.js - Vue-i18n - 来自 http 请求的动态本地化问题

javascript - 将 Vue 对象附加到元素的最推荐语法是什么?

php - Laravel API 对后续请求的验证/保护 : no login/logout and no "users" table

html - 如何在Vuejs中对齐单个组件中的div?

javascript - 有条件地更改类 vue.js

vue.js - 在 vue 生命周期钩子(Hook)中延迟销毁

javascript - 滚动位置到达屏幕中的元素位置时如何显示和过渡?

javascript - VueJS : prevent bouncing and zooming on IOS10+ with routing