时间戳

首页 > 解决方案 > 在 x-template 中获取 Vue.js 实例特定的组件数据

vue.js - 在 x-template 中获取 Vue.js 实例特定的组件数据

问题描述

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

如果我将数据直接放入组件中，一切正常，但我不知道如何将数据传递给每个单独的 vm 实例。这是我目前正在使用的：

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，但没有观察者。

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

谢谢！

标签： vue.jsvue-component

解决方案

不要在组件注册 ( )处设置dataattr 。Vue.component(...)相反，声明组件使用的 props 并通过markupor传递它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>

推荐阅读