Vue.JS“TypeError：reverseMessage 不是函数”

Question

我正在尝试使用 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 !',
  }
})

这失败并出现以下控制台错误：

• 类型错误：reverseMessage 不是函数。（在 'reverseMessage()' 中，'reverseMessage' 未定义）

• 渲染错误：“TypeError：reverseMessage 不是函数。（在‘reverseMessage()’中，‘reverseMessage’未定义）”

• 属性或方法“reverseMessage”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

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

Answer 1

您看到的错误是由于 Vue 不知道您定义的全局函数（即reverseMessage()）。Vue 在渲染模板时不提供对全局函数/变量的访问。它可以访问的本地函数在组件的methods属性中声明。在您的情况下，它看起来像这样：

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

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

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

您的模板使用v-html指令来显示反向消息，但这是不必要的，因为 (1) 消息本身不是 HTML，并且 (2) Vue 建议用户输入不要使用它：

在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致XSS 漏洞。仅对受信任的内容使用 HTML 插值，切勿对用户提供的内容使用。

相反，您应该为此使用字符串插值：

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

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

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