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

Question

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

<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”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保该属性是 react 性的，无论是在数据选项中还是基于类的组件

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

Answer 1

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

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

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

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

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

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

相反，您应该使用 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/vue@2.5.17"></script>

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