在 Vue.js 中如何从数据调用方法？

在 Vue.js 中从数据调用方法

问题陈述

在 Vue.js 组件中，当你尝试从 data() 函数调用一个方法时，你可能会遇到以下错误：“ReferenceError: strSlug is not defined”。

原因

这种错误通常是由于不同作用域的问题。在 Vue.js 中，data() 和 methods() 函数是在不同的作用域中定义的。这意味着 data() 中定义的属性在 methods() 函数中无法直接访问。

解决方案

解决这个问题有两种方法：

1. 使用箭头函数

箭头函数自动继承它们定义的作用域。因此，你可以使用箭头函数访问 data() 中的属性：

methods: {
  setActive(pathname) {
    return {active: window.location.pathname === pathname}
  },
  strSlug: () => _.kebabCase(val)
}

2. 使用 bind() 方法

bind() 方法可以创建一个新函数，该函数的 this 值被绑定到指定的对象。

methods: {
  setActive(pathname) {
    return {active: window.location.pathname === pathname}
  },
  strSlug: function() {
    return _.kebabCase(val)
  }.bind(this)
}

优化代码

为了进一步简化代码，你可以使用 ES6 计算属性：

computed: {
  strSlug() {
    return _.kebabCase(this.shop.name)
  }
}

然后，你可以在模板中直接使用 strSlug 计算属性：

<a :href="baseUrl + '/store/' + shop.id + '/' + strSlug">{{tab.title}}</a>

结论

通过使用箭头函数、bind() 方法或 ES6 计算属性，你可以在 Vue.js 中从数据调用方法，从而扩展组件的功能。

常见问题解答

1. 为什么在 Vue.js 中使用不同作用域？

不同作用域有助于维护代码的可读性和可维护性，并防止意外修改数据。

2. 除了箭头函数和 bind() 方法之外，还有其他方法可以访问 data() 中的属性吗？

是的，你还可以使用 this

methods: {
  strSlug() {
    return _.kebabCase(this.shop.name)
  }
}

3. 什么时候应该使用箭头函数而不是 bind() 方法？

箭头函数在需要访问 data() 中的属性时更为简洁，而 bind() 方法在需要绑定到特定对象时更有用。

4. ES6 计算属性与 methods() 函数有什么不同？

ES6 计算属性是只读的，而 methods() 函数可以包含业务逻辑和修改数据。

5. 为什么使用计算属性来获取 strSlug 更好？

计算属性提供了更具声明性和可维护性的方式来从数据派生信息。