Question

我有一个相当简单的VueJS应用程序，3个组件（Login，SelectSomething，DoStuff）

登录组件只是用户和传递输入的表单，而第二个组件需要显示登录进度中获得的一些数据。

如何将数据从一个组件共享给其他组件？因此，当我路由到第二个组件时，我仍然在Login 1中获得了数据？

Answer 1

您可以使用props或事件总线，在那里您可以从组件发出事件并聆听另一个事件

vm.$on('test', function (msg) {
  console.log(msg)
})

vm.$emit('test', 'hi')
// -> "hi"

Answer 2

在Vue.js中，组件可以使用props或events相互通信。这一切都取决于你的组件之间的关系。

让我们举一个小例子：

<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>

要将信息从父级发送到Child，您需要使用道具：

<template>
<h2>Parent Component</h2>
<child-component :propsName="example"></child-component>
</template>

<script>
export default {
 data(){
  return{
   example: 'Send this variable to the child'
  }
 }
}
</script>

要将信息从孩子发送到父母，您需要使用事件：

子组件

<script>
 ...
 this.$emit('example', this.variable);
</script>

父组件

<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>

<script>
export default {
 methods: {
  methodName(variable){
   ...
  }
 }
}
</script>

查看vue.js的文档以获取有关此主题的更多信息。这是一个非常简短的介绍。

Answer 3

如果您有很多嵌套的组件，请使用这个小的plugin：

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('user1'),
    obj:{},
    config:Config,
    ....
  },
});

现在您可以在任何组件中使用$user，而无需使用道具或其他

如何在VueJS

3 个答案: