javascript - Vue.JS “TypeError: reverseMessage is not a function”

我正在尝试使用Vue反向显示字符串。我的模板是:

<div id="app">
  <reverse :msgreverse="message" :reverseMessage="reverseMessage()"></reverse>
</div>

而我的脚本:

function reverseMessage(msg) {
  return msg.split('').reverse().join('')
}

Vue.component('reverse', {
  props:["msgreverse", "reverseMessage"],
  template: '<p v-html="reverseMessage(msgreverse)"></p>'
})

var app = new Vue({
  el: '#app',
  data: {
    message:'The message to reverse !',
  }
})

失败并显示以下控制台错误:

TypeError:reverseMessage不是函数。 (在“reverseMessage()”中，“reverseMessage”未定义)

渲染错误:“TypeError:reverseMessage不是函数。(在'reverseMessage()'中，'reverseMessage'未定义)“

属性或方法“reverseMessage”未在实例上定义，但在渲染期间被引用。通过初始化属性

，确保该属性在data选项中或对于基于类的组件都是反应性的

如何获取<reverse>组件以反向显示给定的字符串？

最佳答案

您看到的错误是由于Vue不了解您已定义的全局函数(即reverseMessage())导致的。渲染模板时，Vue不提供对全局函数/变量的访问。它有权访问的本地函数在组件的methods属性中声明。在您的情况下，它看起来像这样:

Vue.component('reverse', {
  // ...
  methods: {
    reverseMessage(msg) {
      return msg.split('').reverse().join('')
    }
  }
})

由于该组件的目的似乎是反转给定的字符串，因此无需为prop函数指定reverseMessage，因此您可以将其从props中删除:

Vue.component('reverse', {
  // ...
  //props:["msgreverse", "reverseMessage"],  // DON'T DO THIS
  props:["msgreverse"],
})

您的模板使用v-html指令显示反转的消息，但这是不必要的，因为(1)消息本身不是HTML，以及(2)Vue recommends against it for user input:



相反，您应该为此使用string interpolation:

Vue.component('reverse', {
  // ...
  //template: '<p v-html="reverseMessage(msgreverse)"></p>'  // DON'T DO THIS
  template: '<p>{{reverseMessageg(msgreverse)}}</p>'
})

Vue.component('reverse', {
  props: ['msgreverse'],
  methods: {
    reverseMessage(msg) {
      return msg.split('').reverse().join('')
    }
  },
  template: '<p>{{reverseMessage(msgreverse)}}</p>'
})

new Vue({
  el: '#app',
  data: () => ({
    message: 'Hello Vue.js!',
  }),
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <reverse :msgreverse="message"></reverse>
</div>