Vue 2：无法从组件中找到单击事件的方法答案

【问题标题】：Vue 2: Unable to find method on click event from componentVue 2：无法从组件中找到单击事件的方法
【发布时间】：2017-06-27 23:24:06
【问题描述】：

在我的 vue 应用程序中，我在单击事件上调用了一个函数，该函数位于一个组件中。下面是组件代码：

Vue.component( 'new-board', {
  template: `
    <div>
      <br/>
      <div class="panel panel-primary">
        <div class="panel-heading">
          Create New Board
        </div>
        <div class="panel-body">
          <input class="form-control" placeholder="Board Name"/>
          <button 
            style="margin-top: 5px;" 
            @click.stop="addBoard"
            class="btn btn-success btn-xs btn-block"
          >
            Add Board
          </button>
        </div>
      </div>
    </div>
  `
} )

这里是 vue 应用实例：

var boardItem = new Vue( {
  el: "#board-item",
  data: {
    boards: [
      { name: 'learning vue 2' }
    ],
    newBoard: [],
    viewNewBoard: true
  },
  methods: {
    displayNewBoard: function() {
      event.preventDefault()
      if( this.viewNewBoard == false ) {
        this.viewNewBoard = true
      } else {
        this.viewNewBoard = false
      }
    },
    addBoard: function() {
      console.log( 'add board' )
    }
  }
} )

现在，当我点击上述组件中的Add Board 按钮时，它显示此错误：

未捕获的 ReferenceError: addBoard 未定义单击时（在 Xr 处进行评估 (vue.min.js:7), :2:455）在 HTMLButtonElement.invoker (vue.min.js:6)

好像组件里的按钮找不到addBoard方法，写在同一个文件里！我在这里缺少什么？

【问题讨论】：

组件不能直接调用父 Vue 上定义的方法。您需要在组件上定义 addBoard。

标签： javascript vuejs2

【解决方案1】：

试试：

Vue.component( 'new-board', {
  template: `
    <div>
      <br/>
      <div class="panel panel-primary">
        <div class="panel-heading">
          Create New Board
        </div>
        <div class="panel-body">
          <input class="form-control" placeholder="Board Name"/>
          <button 
            style="margin-top: 5px;" 
            @click.stop="addBoard"
            class="btn btn-success btn-xs btn-block"
          >
            Add Board
          </button>
        </div>
      </div>
    </div>
  `,
  methods: {
    addBoard: function(){ console.log('add board');}
  }
} )

【讨论】：

【解决方案2】：

这里有一些变化，如果你想与不相关的组件共享事件，你必须使用一个新的 vue 实例来触发这些事件并监听。因此，根据您的代码，这应该会有所帮助。

window.Event = new Vue();

Vue.component( 'new-board', {
  template: `
    <div>
      <br/>
      <div class="panel panel-primary">
        <div class="panel-heading">
          Create New Board
        </div>
        <div class="panel-body">
          <input class="form-control" placeholder="Board Name"/>
          <button 
            style="margin-top: 5px;" 
            @click.stop="addBoard" // keep this as the name of the local method
            class="btn btn-success btn-xs btn-block">
            Add Board
          </button>
        </div>
      </div>
    </div>
  `,
   methods:{
        addBoard(){
             // fire the event, also you can add any params
             Event.$emit('callAddBoard',data)
        }
   }
} )

主实例应该监听那个事件

var boardItem = new Vue( {
  el: "#board-item",
  data: {
    boards: [
      { name: 'learning vue 2' }
    ],
    newBoard: [],
    viewNewBoard: true
  },
  methods: {
    displayNewBoard: function() {
      event.preventDefault()
      if( this.viewNewBoard == false ) {
        this.viewNewBoard = true
      } else {
        this.viewNewBoard = false
      }
    },
    addBoard: function() {
      console.log( 'add board' )
    }
  },

   created(){
         // here you listen and excute the remote event from component, and apply a local method.
         Event.$on('callAddBoard', this.addBoard)
   }
} )

据我尝试，这很有效，您可以将事件发送到任何组件，而无需通过主实例。

【讨论】：