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

Posted 2023-02-23

【中文标题】如何将道具从另一个 js 模块传递给 Vue？

【英文标题】：How to pass props to Vue from another js module?

【发布时间】：2020-03-30 23:01:56

【问题描述】：

是否可以将任何 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 模块中，并将有意义的信息传递给它。

【参考方案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

【参考方案2】：

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

render: h => h(App)

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

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

所以要么：

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

后者看起来像这样：

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

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

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

【讨论】：

太棒了，非常感谢您的解释。我不明白使用 render 的含义，并认为它适用于 webpack。您的两个解决方案都有意义，我将在render() 上进一步阅读。关于箭头函数的有趣注释...

@JesseRezaKhorasanee 这有点适用于 Webpack。如果您使用的是 Webpack 构建和 SFC，那么 Webpack 将在构建期间将所有模板编译为 render 函数。结果是Vue不需要在浏览器中编译任何模板，节省了大量的库代码字节。通常根 Vue 实例是一个异常值，Webpack 无法轻松编译它的模板，因此使用显式 render 函数代替。否则，必须下载完整版的 Vue，包括编译器，才能编译单个模板。

感谢@skirtle 的澄清。这说得好，现在我开始明白了。