Question

我的Vue.js根组件之一是使用x模板，显示在应用程序的3个不同部分（3个独立的Vue实例）中。

如果我将数据直接放入组件中，一切都可以正常工作，但是我无法弄清楚如何将数据传递到每个虚拟机实例。这是我目前正在使用的：

Vue.component('some-table', {
    template: '#some-template',
    data() {
        return { someArray: [] }
    },
    methods: {
    }
});

let someVm = new Vue({
    el: '#some-div',
});

模板：

<script id="some-template" type="text/x-template">
    <table v-for="(item, id) in someArray" v-bind:key="id">
        <tr>
            <td>{{item.someKey}}</td>
        </tr>
    </table>
    </div>
</script>

在另一个JavaScript类中，我试图将数据推送到someArray：

class SomeClass {
    constructor() {
    }

    someMethod() {
        let newData = [1,2,3];
        someVm.someArray = newData;  // doesn't work
        someVm.someArray.push(...newData);  // doesn't work
        someVm.someArray.concat(newData);  // doesn't work
    }
}

使用上面someMethod（）中的任何一行，我可以看到someVm包含someArray，但是没有观察者。

我似乎无法弄清楚如何将新数据推送到每个实例，然后可以在某些模板中访问。我显然缺少了一些非常简单的东西，但是我已经坚持了一段时间，所以任何指针都很棒！

谢谢！

Answer 1

请勿在组件注册（data）上设置Vue.component(...)属性。相反，声明组件使用的道具并通过markup或js。

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('some-component', {
  template: '#some-component',
  props: {
    message: {
      type: String, // declare the props: https://vuejs.org/v2/api/#props
    }
  }
});

const cp1 = new Vue({
  el: '#cp1',
  data() {
    return {
      msg: "using data"
    };
  }
});

const cp2 = new Vue({
  el: '#cp2'
});

const cp3 = new Vue({
  el: '#cp3'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script id="some-component" type="text/x-template">
  <p>{{message}}</p>
</script>

<div id="cp1">
  <some-component :message="msg"></some-component>
</div>

<div id="cp2">
  <some-component message="using props"></some-component>
</div>

<div id="cp3" is="some-component" message="using props and is"></div>

在X-Template中获取Vue.js特定于实例的组件数据

1 个答案: