Question

我被传递的Vue组件卡住了。

当调用Vue组件中的click事件时，我想将Vue组件传递给其他组件。我尝试了“ this”，但返回null。

如果有人可以帮助我。这是我的代码。预先感谢。

<template>
...

<button type="button" class="confirmBtn" @click="$util.routerReplace(this, '/')">
    <span>confirm</span>
</button>
...

</template>

util.js
function routerReplace (foo, path) {
    console.log(foo)        // Now return null => Vue Component
    console.log(path)       // path
}

Answer 1

我的理解是，直接在模板中指定的事件处理程序中的所有标识符都以this作为上下文进行评估。因此，您正在将this.this传递给未定义的routerReplace。

如果您使用组件方法代替事件处理程序，它将起作用：

var Component = {
  template: '<button type="button" @click="onClick">Confirm</button>',
  methods: {
    onClick: function() {
      this.$util.routerReplace(this, '/')
    },
  },
}

Vue.prototype.$util = {};
Vue.prototype.$util.routerReplace = function(component, path) {
  console.log(component, path);
};

new Vue({
  el: '#app',
  components: {
    MyComponent: Component,
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-component/>
</div>

如何在Vue模板中通过点击事件传递Vue组件？

1 个答案: