Vue.js：访问模板字符串中的全局值答案

【问题标题】：Vue.js: access global value in template stringVue.js：访问模板字符串中的全局值
【发布时间】：2017-04-28 20:41:38
【问题描述】：

我有一个非常基本的 Vue.js 应用程序，如下所示：

index.html（为了简洁起见，只是 <body>）

<div id="root"></div>

main.js

var config = {
  title: 'My App',
}

new Vue({
  el: '#root',
  template: '<div>{{ config.title }}</div>',
})

这给了我：

Property or method "config" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)

我猜这是因为 Vue 在数据存储中而不是 window 中寻找它。有什么方法可以表明config 是这里的全局变量，还是有更好的方法来完全做到这一点？我想我可以将配置对象作为道具传递给我的根 Vue 实例，但似乎只有组件接受道具。感谢您对此提供任何见解。

【问题讨论】：

为什么不直接把它传给 Vue 实例呢？ data : { config : config },

标签： javascript vue.js

【解决方案1】：

您可以尝试如下定义您的应用：

new Vue({
  el: '#root',
  template: '<div>{{ config.title }}</div>',
  data: function() {
    return {
      config: window.config
    }
  }
})

在上述定义中，根组件中的this.config 指向window.config - 全局变量。

【讨论】：

【解决方案2】：

如果您只是尝试将 App Name 作为硬编码字符串传递，您可以执行以下操作：

var nameMyApp = new Vue({
  el: '#root',
  data: { input: 'My App' },
  computed: {
    whosapp: function () {
      return this.input
    }
  }

})

你的html是这样的：

<div id="root">
  <div v-html="whosapp"></div>
</div>

这会将 input 的值传递给 whosapp div。

但是，如果您正在寻找更具活力的东西，这将是您的最佳选择：

和上面一样的html...

var nameMyApp = new Vue({
  el: '#root',
  data: { input: 'My App' },

初始值设置为我的应用程序，如果不通过对方法的函数调用进行更改，将显示的内容。

    methods: {
    update: function(name) {
        this.input = name;
    }
  },

这里我们定义了一个方法，当被调用时，传入参数来更新 this.input。

  computed: {
    whosapp: function () {
      return this.input
    }
  }

})

nameMyApp.update("New Name");

这里是我们调用函数的地方，给它一个新的参数；确保参数是一个字符串。

我希望这就是你要找的。p>

【讨论】：