如何将道具从另一个 js 模块传递给 Vue？

Question

是否可以将任何 js 模块的 props 传递给 vue？

对我来说，组件之间的道具传递得很好，但不是来自实际的 Vue 应用程序本身：

main.js

import Vue from 'vue'
import App from './App.vue'


var myVue = new Vue({  export to other files
  el: '#entry',
  components: {App},
  render: h => h(App),
  data: function(){
    return{
      testSuccess:'this test was successful!'
    }
  },
})

window.myVue = myVue // we use window.myVue because if we can export to window, we can export to other js modules.

App.vue

<template>
  <div ref="app">
    {{ testSuccess ? testSuccess : 'prop not imported!' }}
  </div>
</template>

<script>
export default = {
  name: "app",
  props: ["testSuccess"]
}
</script>

index.html

<div id="entry" >
  <app :testSuccess="testSuccess"></app>
</div>
<script src="/dist/build.js"></script>

我错过了什么？

我了解如何使用组件来做到这一点。

我希望能够将 Vue 模块导出到其他 js 模块中，并将有意义的信息传递给它。

Answer 1

正如您所发现的，您不能将 props 传递给您的 $root Vue 应用程序。但是，您可以修改 Vue 实例的属性，Vue 将对这些更改做出反应。

在上面的示例中，您可以在任何地方（包括控制台）编写：

window.myApp.testSuccess= "I've been changed!";

HTML 应该会更新。

但是，您在上面编写组件的方式意味着testSuccess 属性没有被传递到App.vue 组件中。不要让你的 App.vue 成为根 Vue 实例的组件，而是像这样创建它们：

index.html

<div id="app" >
</div>
<script src="/dist/build.js"></script>

ma​​in.js

import Vue from 'vue'
import App from './App.vue'

var myVue = new Vue({  // export to other files
  el: '#app',
  ...App,
})

window.myVue = myVue // we use window.myVue because if we can export to window, we can export to other js modules.

App.vue

<template>
  <div>
    {{ testSuccess || 'testSuccess is blank!' }}
  </div>
</template>

<script>
export default {
  data: { // doesn't need to be a function in the root Vue instance
    testSuccess: "this is the default text",
  ...
}
</script>

更好的方法

尽管如此，更好的方法是使用适当的状态管理。通过将所有共享状态放入专用状态对象（或 VueX）中，任何有权访问状态对象的模块都可以操作状态。

阅读https://vuejs.org/v2/guide/state-management.html

Answer 2

这是您的根 Vue 实例的 render 函数：

render: h => h(App)

您没有将任何道具传递给h，因此App 将在没有道具的情况下创建。

#entry 中的模板将被忽略，因为您提供了显式的 render 函数。

所以要么：

1. 从根 Vue 实例中删除 render 函数。请注意，大多数示例使用 render 函数的原因是它们可以使用 Vue 的仅运行时构建，它无法编译模板。
2. 从#entry 中删除模板，并在render 函数中将props 传递给App。

后者看起来像这样：

render (h) {
  return h(App, { props: { testSuccess: this.testSuccess } })
}

注意这不能使用箭头函数，因为它需要访问this。

一旦你正确地传递了 props，你应该能够使用 myVue.testSuccess = '...' 更新值没有问题。