Vue函数命名揭秘：为何你的自制函数总是不灵验？

检查命名

你有遇到过Vue里自制函数用不起来的麻烦吗？别急，这个小问题很好解决，只要每个函数都放在对的位置就成。你得把它们安置在被称为methods的专属区域。不过，别弄错了关键词或大小写否则Vue就找不到你的函数并为你服务了。打个比方，假如我们造了个名字叫”my-component”的Vue组件，里面有个按钮，想要点它就能让提示框跳出来。但怎么总不见效？很有可能是你把函数名搞混了，使得Vue难以找到相应的方法，自然也无法把它与事件关联！

要先确保你的名称没弄错。别忘了看看有没有拼写或大小写不对的地方。比如说，编程的时候，有人会叫handleClick这类名字？那肯定不行滴！

检查组件的作用域

Vue.component('my-component', {
  template: 'Click me',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

Vue组件就好像小屋子一样各有各的功能-各种自定义方法！千万别乱碰，否则Vue真要摸不着头脑了。在使用Vue组件时，得知道怎么在哪个房子里干活，不能没头没尾地乱闯。举个例子，我做了两个叫做”my-component1″和”my-component2″的小部件，它们各自藏了个按钮。但是注意，如果全部塞到一个家里（也就是一个实例），那么对不起，每个按钮将无法理解你的指令。这就是Vue的”作用域”了，每个小部分只在意自己的问题，不会插手别人的事。要是想让下级组件做事儿咋办？那就只能把那个方法放到相应的下级组件那里去才行！

检查模板内的语法

Vue.component('my-component1', {
  template: 'Click me',
  methods: {
    handleClick() {
      alert('clicked by component 1');
    }
  }
});
Vue.component('my-component2', {
  template: 'Click me',
  methods: {
    handleClick() {
      alert('clicked by component 2');
    }
  }
});
new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('clicked by root');
    }
  }
});

遇到难缠的问题别烦躁还记得之前提到的哪些棘手问题吗？比如说在Vue模板里面有时候会有点母语混乱，比如不小心拼错单词这种小破事儿。那我跟大伙儿分享个超级简单的例子，要是你把”@click”写成了”@ckick”，Vue可就懵圈，不知道该咋办才好。这么搞下去，原本应该要去执行的任务可能就要胡来了。

注意，Vue不会直接告诉你你绑定的事件有没有生效。那么，究竟是怎样的？实际上，Vue就是用字符串来搞定所有的事，就算打错了字，它也会继续运行，啥都不说。因此，我们要仔细检查代码，确保没问题才可以！

new Vue({
  el: '#app',
  components: {
    'my-component1': {
      template: 'Click me',
      methods: {
        handleClick() {
          alert('clicked by component 1');
        }
      }
    },
    'my-component2': {
      template: 'Click me',
      methods: {
        handleClick() {
          alert('clicked by component 2');
        }
      }
    }
  }
});

说实话，好多人搞不定Vue，要么是记不住那几个名字，要么是搞不懂作用域咋回事儿，还有就是模板语法老是出错。所以敲代码得小心点，别粗心给自己找罪受！

Vue.component('my-component', {
  template: 'Click me',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

。