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 becayse 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

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

render: h => h(App)

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

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

所以：

从根Vue实例中删除render函数。请注意，大多数示例使用render函数的原因是，以便他们可以使用仅运行时的Vue构建，而不能编译模板。
从#entry内部删除模板，并将道具传递到App函数中的render。

后者看起来像这样：

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

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

正确传递道具后，您应该可以使用myVue.testSuccess = '...'来更新值。

Answer 2

如您所知，您无法将道具传递到您的$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>

main.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 becayse 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

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

main.js

App.vue

index.html

2 个答案: