问题

[Vue warn]: Property or method "changeSetting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>)

发生错误是因为在此处changeSetting的MainTable组件中引用了该方法：

    "<button @click='changeSetting(index)'> Info </button>" +

但是该changeSetting方法并未在MainTable组件中定义。它在此处的根组件中定义：

var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

需要记住的是，属性和方法只能在定义的范围内被引用。

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。

您可以在 Vue 的文档 中阅读有关组件编译范围的更多信息。

我该怎么办？

到目前为止，已经有很多关于在正确范围内定义事物的讨论，所以修复只是将changeSetting定义移到MainTable组件中？

看起来很简单，但这是我推荐的。

您可能希望您的MainTable组件成为一个愚蠢的/展示性组件。（如果你不知道它是什么，这里有一些东西可以阅读，但 tl;dr 是组件只负责渲染某些东西——没有逻辑）。smart/container 元素负责逻辑 - 在您的问题中给出的示例中，根组件将是 smart/container 组件。有了这个架构，你就可以使用Vue的父子通信方式让组件进行交互。您将数据传递给MainTablevia props，并MainTable通过events将用户操作发送到其父级。它可能看起来像这样：

Vue.component('main-table', {
  template: "<ul>" +
    "<li v-for='(set, index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  props: ['settings'],
  methods: {
    changeSetting(value) {
      this.$emit('change', value);
    },
  },
});


var app = new Vue({
  el: '#settings',
  template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>',
  data: data,
  methods: {
    changeSetting(value) {
      // Handle changeSetting
    },
  },
}),

以上应该足以让您很好地了解该怎么做并开始解决您的问题。

如果有人遇到我遇到的同样愚蠢的问题，请确保您的组件的“数据”属性拼写正确。（例如data，而不是date）

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

就我而言，原因是，我只忘记了关闭

</script>

标签。

但这导致了相同的错误消息。

记得归还财产

在渲染期间访问了属性“搜索”但未在实例上定义的另一个原因是当您忘记在setup(){}函数中返回变量时

所以记得在最后加上return语句：

export default {

  setup(){

    const search = ref('')
    //Whatever code

    return {search}

  }
}

注意：我使用的是 Composition API

可能是拼写错误造成的

我在脚本结束标记处输入错误

</sscript>