更新

Question

我对VueJS很新，我很难让儿童组件正常工作。

首先，我在＆＃34;视图＆＃34;中有一些代码。我意识到我想要多次使用，所以我开始将代码分解为一个单独的组件，但我遇到了这个问题：

[Vue警告]：属性或方法"<feedbackCallback|stateCallback|submitCallback>"未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

我的设置如下：

Vue 2.4.2
Webpack 3.5.5
Bootstrap-Vue 1.0.0
Vue-Router 2.7.0
我也使用单一文件组件

我要打电话给＆＃34;查看＆＃34; ViewA和＆＃34;组件的文件＆＃34; ＆＃34; COMPA＆＃34;

删除了部件的ViewA未进入单独的组件：

<template>
  [...]
  <b-form @submit="submitCallback">
    <b-form-group
      id="groupID"
      description=""
      label="Set Thing Here" :feedback="feedbackCallback"
      :state="stateCallback">
      <b-form-input
        id="inputID" :state="stateCallback"
        v-model.trim="thing">
      </b-form-input>
    </b-form/group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
  [...]
</template>

<script>
export default {
  [...]
  data () {
    return {
      thing: '',
      [...]
    }
  },
  computed: {
    stateCallback () {
      return 'invalid'
    },
    feedbackCallback () {
      return 'Please enter a valid thing'
    }
  },
  methods: {
    submitCallback (event) {
      [...]
    }
  },
  [...]
</script>

现在，我把这些家伙变成了CompA。

这是我现在收到错误的代码：

ViewA：

<template>
  [...]
  <comp-a v-model.trim="thing" :thingvalue="thing"></comp-a>
  [...]
</template>

<script>
import CompA from '../components/CompA'

export default {
  name: 'view-a'
  components: {
    CompA
  },
  data () {
    return {
      thing: ''
    }
  }
}
</script>

COMPA：

<template>
  <b-form @submit="submitCallback">
    <b-form-group
      id="groupID"
      description=""
      label="Set Thing Here" :feedback="feedbackCallback"
      :state="stateCallback">
      <b-form-input
        id="inputID" :state="stateCallback"
        :value="thingvalue">
      </b-form-input>
    </b-form/group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
</template>

<script>
export default {
  props: {
    thingvalue: {
      type: String
      required: true
    }
  },  
  computed: {
    stateCallback () {
      return 'invalid'
    },
    feedbackCallback () {
      return 'Please enter a valid thing'
    }
  },
  methods: {
    submitCallback (event) {
      [...]
    }
  }
}
</script>

我可能会注意到，当我移动代码时，我将v-model.trim="thing"更改为:value="thing"。在我这样做之前，我遇到了同样的错误。

现在有什么我想念的吗？我一直在挖掘很多东西来尝试和理解。我甚至看了一些bootstrap-vue的代码，看看他们是否做了任何时髦的事情。但事实证明，他们有一些计算属性以非常相似的方式使用。所以我不明白问题发生在哪里。如果您需要更多信息，请与我们联系。

更新

我更确信WebPack和VueJS正在发生一些事情，因为我没有在捆绑的js文件中找到这些属性/方法的任何定义。

Answer 1

事实证明，这对我来说只是一个愚蠢的错误。没有关闭脚本标记。 Eslint也没有捕获（可能有一个确定它的设置），所以用webpack编译就好了。经验教训：永远记住你的结束标签！

Vuejs - 未在实例

更新

1 个答案: