代码之家 › 专栏 › 技术社区 › twk

在使用Vue CLI项目设置时,如何将$emit与Vue.js一起使用?

vuejs2 scope vue.js javascript

twk · 技术社区 · 7 年前

谢谢你能提供的任何帮助。有人知道如何在Vue.js中使用$emit方法将数据向上链发送到全局方法吗?在Vue.js的一个非常基本的示例中,我没有遇到任何问题。但是,一旦使用Vue CLI设置了我的项目(使用更高级的文件夹结构),我的方法似乎无法正确注册。

在我的 Register.vue 组件中,我注册了一个新用户,并在注册后向上发送新用户以更新我的全局范围:

this.$emit("login-user", newUser);

我的组件注册如下:

<Register msg="Otherwise, go ahead and register here:" :login-user="loginNewUser"/>

哪里 :login-user 引用全局方法: loginNewUser() .

loginNewUser() 方法的设置如下所示 main.js

new Vue({
  router,
  store,
  render: h => h(App),
  methods: {
    loginNewUser(user) {
      console.log(user);
    }
  }
}).$mount("#app");

我的方法放错地方了吗?使用Vue CLI时,如何将数据从组件向全局作用域上游发送 create

更多信息

https://github.com/twknab/viaRV_vue_cli_project
src/components/Register.vue , on line 76 这是我努力使我的梦想实现的地方 $emit 召唤 main.js 还有我的 loginNewUser() 方法 on line 17 ,我将收到错误消息:

[Vue warn]:属性或方法“loginNewUser”未在实例上定义,但在呈现期间被引用。通过初始化属性,确保此属性在数据选项中或对于基于类的组件是被动的。

非常感谢您的时间和阅读。

1 回复 | 直到 7 年前

Ana Liza Pandac 7 年前

显示警告是因为 loginNewUser 正在中引用 Home 组成部分:

<Register msg="Otherwise, go ahead and register here:" @login-user="loginNewUser"/>

然而 罗金纳乌瑟酒店 未在中定义 家 组件,但在您的 main.js 在组件层次结构中向上三级的文件: main.js > App.vue > Home.vue

new Vue({
  router,
  store,
  render: h => h(App),
  methods: {
    loginNewUser(user) {
      // existing code here
    }
  }
}).$mount("#app");

解决方案#1

要解决这个问题,您必须从 main.js 给你 家

,将事件处理程序传递给 App.vue 通过修改 render 作用于 main.js 发件人:

render: h => h(App)

为此:

render: function(createElement) {
  return createElement(App, {
    on: {
      loginNewUser: this.loginNewUser
    }
  })
}

h createElement 所以基本上,他们是一样的。

createElement 接受多个参数,我们将使用 second 论点是要传递的数据对象 event 渲染组件的处理程序。

第二 ,在你的 App 罗金纳乌瑟酒店 并将引用传递给 router-view .

export default {
  name: "App",
  methods: {
    loginNewUser() {
      this.$emit('loginNewUser');
    }
  }
}

<router-view @login-new-user="loginNewUser"></router-view>

第三定义 罗金纳乌瑟酒店 在你的 Home.vue 组成部分

export default {
  name: "home",
  components: {
    Login,
    Register
  },
  methods: {
    loginNewUser() {
      this.$emit('loginNewUser');
    }
  }
};

最后一点 :login-user 到 @login-user .

如果您正在使用 Vuex 或者计划,而不是从上到下传递事件处理程序,您可以使用 actions 您可以在组件中的任何位置调用它。