如何将数据从 VueJS 组件传递到 main.js?
How to pass data from a VueJS component to main.js?
是否可以将data()方法中定义在组件中的数据发送到main.js文件(或定义Vue实例的地方)?我以为我可以使用 vueX 来执行以下操作,但即使在了解计算道具、吸气剂和突变之后也不知道如何处理它:
Data in Component -> Store -> Main.js
编辑:如何从 COMP 在 VUEX 商店中设置数据?
假设商店有一个名为 currentList 的 属性,其值需要从 Component1.vue 中的列表中输入。我如何将该列表发送到 VueX 商店?
我不懂 Vue,但我相信我明白你在找什么。
您在这里尝试实现的目标,在所有其他前端框架中,可以这样调用:"component to parent communication".
你可以有一个第 4 级嵌套组件,你想将一些数据传递给 Main.js(我想,在 Vue 中,它仍然是一个组件,准确地说是根组件)
如我所见,您可以使用 $emit:https://forum.vuejs.org/t/passing-data-back-to-parent/1201
在 React 中(你也可以在 Vue 中这样做,但你应该选择 vue 风格的解决方案)你会使用一个回调函数:父级传递给子级一个函数,子级可以调用该函数来设置某个 属性在父组件中。
如今,另一个完全避免这种通信的常见选项是使用像 Redux 这样的状态管理库。因为每个组件都可以访问一个全局存储(就像一个全局变量)并且在第 4 级组件在这个全局存储中设置一个 属性 之后,main.js 可以读取它。
如果你想将数据从你的组件传递到 Vuex $store,你应该使用 Mutations(或动作,如果数据异步进入你的组件)。
假设你的 mutation 已经在商店中定义(并且商店已经正确设置),你可以从你的组件中调用它,如下所示:
this.$store.commit("YOUR_MUTATION", "data")
我建议您在浏览器中使用 vue-tools 来跟踪商店中的商品。
是否可以将data()方法中定义在组件中的数据发送到main.js文件(或定义Vue实例的地方)?我以为我可以使用 vueX 来执行以下操作,但即使在了解计算道具、吸气剂和突变之后也不知道如何处理它:
Data in Component -> Store -> Main.js
编辑:如何从 COMP 在 VUEX 商店中设置数据?
假设商店有一个名为 currentList 的 属性,其值需要从 Component1.vue 中的列表中输入。我如何将该列表发送到 VueX 商店?
我不懂 Vue,但我相信我明白你在找什么。 您在这里尝试实现的目标,在所有其他前端框架中,可以这样调用:"component to parent communication".
你可以有一个第 4 级嵌套组件,你想将一些数据传递给 Main.js(我想,在 Vue 中,它仍然是一个组件,准确地说是根组件)
如我所见,您可以使用 $emit:https://forum.vuejs.org/t/passing-data-back-to-parent/1201 在 React 中(你也可以在 Vue 中这样做,但你应该选择 vue 风格的解决方案)你会使用一个回调函数:父级传递给子级一个函数,子级可以调用该函数来设置某个 属性在父组件中。
如今,另一个完全避免这种通信的常见选项是使用像 Redux 这样的状态管理库。因为每个组件都可以访问一个全局存储(就像一个全局变量)并且在第 4 级组件在这个全局存储中设置一个 属性 之后,main.js 可以读取它。
如果你想将数据从你的组件传递到 Vuex $store,你应该使用 Mutations(或动作,如果数据异步进入你的组件)。
假设你的 mutation 已经在商店中定义(并且商店已经正确设置),你可以从你的组件中调用它,如下所示:
this.$store.commit("YOUR_MUTATION", "data")
我建议您在浏览器中使用 vue-tools 来跟踪商店中的商品。