如何从组件方法访问 Vue 组件数据答案

【问题标题】：How to access Vue component data from component method如何从组件方法访问 Vue 组件数据
【发布时间】：2019-11-05 03:16:20
【问题描述】：

我是 Vue 的初学者，我很困惑为什么我不能从同一个组件上的方法中访问数据属性。每次我尝试使用“this.items”访问我的数据时，它都会返回“items is undefined”。

我尝试更改编写方法的语法（我最初使用箭头函数，但得知它更改了“this”，切换到常规函数定义），但它仍然返回未定义的项目。

这是我带有模板的完整组件：

<template>
    <div>
        <ul>
            <li v-for="(item, index) in items" :key="index">
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                'items': []
            };
        },
        methods: {

            addItem: function(t) {

                this.items.push(t)
            }
        },
    }
</script>

这只是一个简单的待办事项列表，我有另一个组件调用此函数并将参数传递给“addItem()”。

谢谢！

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这是您的代码的工作版本，演示了如何在 UI 中显示 items 并将新元素添加到 items 数组：

https://codesandbox.io/embed/vue-template-7j0xj?fontsize=14

或者如果你愿意，下面也附上Vue组件代码：

<template>
    <div id="app">
        <div>Hello</div>
        <ul v-if="items">
            <li v-for="(item, index) in items" :key="index">
              <div>{{item}}</div>
            </li>
        </ul>
        <div @click="addItem('Something More')">Click to Add Something</div>
    </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      items: ['foo','bar','baz']
    };
  },
  methods: {
    addItem: function(t) {
      this.items.push(t)
    }
  },
};
</script>

【讨论】：

【解决方案2】：

组件之间最简单的通信方式是使用 emit。

例如：这是您的父组件或子组件，与此方法无关。

<template>
    <div>
        <ul>
            <li v-for="(item, index) in items" :key="index">
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                'items': []
            };
        },

        mounted(){
            this.eventHub.$emit('add_item:method', this.addItem);
        },

        methods: {

            addItem: function(t) {

                this.items.push(t)
            }
        },
    }
</script>

以及其他组件的监听事件方法。

<template>

</template>

<script>

    export default {

        mounted(){
            this.eventHub.$on('add_item:method');
        },
    }
</script>

【讨论】：