如何将数据传递到 Vue 实例中以便反映后续更新？答案

【问题标题】：How to pass data into Vue instance so that subsequent updates are reflected?如何将数据传递到 Vue 实例中以便反映后续更新？
【发布时间】：2020-01-27 12:42:41
【问题描述】：

我正在尝试在加载视图并初始化自定义后动态更新 Vue JS 属性。我正在构建一个自定义 Vue 插件并使用 props 来传递选项，其中一个是我需要在组件加载后动态更新传递的值的对象，例如：

<div id="app">
  <script>
  var seedData = {
    percent: 50,
    name: 'Smith'
  }
  setInterval(() => {
    seedData = {
      percent: Math.random(),
      name: 'Smith'
    }
  }, 1000)
  </script>
  <offers :parent-data="seedData"></offers>
</div>

Vue.component('offers', {
  template: '<h1>Parent Data: {{ parentData.percent }}</h1>',
  props: {
    parentData: {
      default: () => ({
        percent: 0,
        name: 'John'
      }),
      type: Object
    },
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});

这将从offersData 加载初始名称/值，但是不会传递setInterval 上的新值。

我尝试在通过<offers> 加载的自定义 Vue 插件中添加一个观察器，但这似乎也不起作用：

watch: {
  parentData: function (newVal) {
    this.parentData = newVal
  }
}

更新

以下是我的实现：

代码笔 -> https://codepen.io/sts-ryan-holton/pen/VwYNzdZ

【问题讨论】：

我真的怀疑这是您使用的代码。模板引用的所有数据都必须在 Vue 实例 (this) 的上下文中。粘贴真实代码....
我只需要在页面加载后更新offersData 的值，并将这些值传递到我的插件中。 <offers> 元素是一个 Vue JS 插件，加载到非 Vue 的普通网站中
您发布的不是 Vue 插件。 This 是 Vue 插件。如果您需要帮助，请在 codepen/jsfiddle 上发布真实代码或创建可重现的示例。你发的还不够
这是我需要做的代码笔，能够在 Vue 之外更新道具，我可能弄错了，我使用组件作为插件，请参阅：codepen.io/sts-ryan-holton/pen/VwYNzdZ

标签： javascript vue.js plugins vuejs2

【解决方案1】：

您的代码存在多个问题

<div id="app"> 中的所有内容都被 Vue 视为模板并编译 - 请参阅 docs

如果render 函数和template 选项都不存在，则挂载DOM 元素的DOM 内HTML 将被提取为模板。在这种情况下，应该使用 Vue 的 Runtime + Compiler 构建。

包括<script>标签有错误。只需尝试包含vue.js（调试构建）而不是vue.min.js（Vue 的最小化生产构建），您就会看到一堆错误（顺便说一句，使用调试构建进行开发总是个好主意，因为它会给您带来很多有用的错误和警告）

它在产品构建中“以某种方式工作”的事实（即初始值显示在页面上）并不意味着它受支持...

所以<div id="app"> 的内部是Vue 的模板。正如我之前在 cmets 中所说，模板引用的所有数据都必须在 Vue 实例的上下文中。你不能将一些全局变量传递给 props。所以将<script> 移出<div id="app"> 将无济于事

[Vue 警告]：属性或方法“seedData”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

你可以做的是像这样将seedData 对象传递给根 Vue 实例：

       var vm = new Vue({
          el: '#app',
          data: {
            seedData: seedData
          } 
        });

现在错误消失了，但数据更改仍未反映。原因不是 Vue 特定的。其简单的 JavaScript。对象在 JS 中通过引用传递。看这段代码：

var a = { name: 'John' }
var b = a
a = { name: 'Smith' }
// b is still pointing to "John" object

要解决此问题，请不要替换整个对象。只需改变它的属性（注意Vue reactivity caveats）

      setInterval(function() {
          seedData.name = 'John';
          seedData.percent = Math.random();
      }, 1000)

整体解决方案：

Vue.component('offers', {
  template: '<h1>{{ parentData.name }}: {{ parentData.percent }}</h1>',
  props: {
    parentData: {
      default: () => ({
        percent: 0,
        name: 'John'
      }),
      type: Object
    },
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data: {
    seedData: seedData
  } 
});

<script>
	  var seedData = {
	    percent: 60,
	    name: 'Smith'
	  }
	  setInterval(function() {
	      seedData.name = 'John';
	      seedData.percent = Math.random();
	  }, 1000)
	</script>
	<div id="app">		
	  <offers :parent-data="seedData"></offers>
	</div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

【讨论】：