子组件方法无法被调用

Question

报错说v-on:click="confirm" expects a function value, got undefined，
还是不明白为什么无法被调用？请大家指点下

今天用vue-devtool调试了下，选中deleteModal后，send to console后，$vm里有confirm方法，但是单独deleteModal.补全，并没有confirm方法

附上了代码，麻烦帮我看下，谢谢

<script type="x/template" id="modal-template">
  <div class="modal-mask" v-show="show" transition="modal">
    <div class="modal-wrapper">
      <div class="modal-container">
         
        <div class="modal-header">
          <slot name="header">
            default header
          </slot>
        </div>
        
        <div class="modal-body">
          <slot name="body">
            default body
          </slot>
        </div>

        <div class="modal-footer">
           <slot name="footer">             
             </slot> 
        </div>
      </div>
    </div>
  </div>
</script>

<div id="courseGrid">
      <tr class="courseRow" v-for="course in courses" v-model="course">
            <td>{{course.courseId}}</td>
            <td>{{course.name}}</td>
            <td>{{course.type}}</td>
            <td>{{course.time}}</td>
                <button class="show-modal btn btn-primary" @click="modifyCourse(course)">修改</button>
                <button class="show-modal btn btn-danger"  @click="delCourse(course)">删除</button>
            </td>        
        </tr>          
</div>

<delete-modal :show.sync="showDeleteModal">
       <p slot="body">really?</p>
         <span slot="footer">
           <button class="btn btn-danger" v-on:click="confirm">
             确定
           </button>
             <button class="btn btn-info" v-on:click="showDeleteModal=false">
             取消
           </button>
         </span>
</delete-modal>

var deleteModal = Vue.component('delete-modal', {
        template: '#modal-template',
        props: {
            show: {
                type: Boolean,
                required: true,
                twoWay: true
            },
        },
        methods: {
            confirm: function () {
                var msg = true;
                console.log(msg);
                this.$dispatch('delcourseconfrim', msg)
            }
        },
    })

dataReq("course", "/handler/adminHandler.ashx?cmd=", function (courses) {
        //初始化Vue实例
        result = new Vue({
            el: '#courseGrid',
            data: function () {
                return {
                    showAddModal:false,
                    showModifyModal: false,
                    showDeleteModal: false,
                    courses: courses.courses,
                    tempCourse: ''
                }
            },
            methods: {
                delCourse: function (course) {
                    this.tempCourse = course;
                    this.showDeleteModal = true;
                }
            },
            events: {
                delcourseconfrim: function (msg) {
                    if (msg) {
                        course = this.tempCourse;
                        this.courses.$remove(course);
                        this.showdeletemodal = false;
                    }
                }
            }
        });
    });

Answer 1

请仔细读官方文档的这一段：编译作用域

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

具体你这个列子来说：

<delete-modal :show.sync="showDeleteModal">
<p slot="body">really?</p>
<span slot="footer">
 <!-- 父组件模板的内容在父组件作用域内编译，
    v-on:click, v-on:click 的作用域是在"delete-modal"这个组件的父组件定义的 -->          
  <button class="btn btn-danger" v-on:click="confirm">
   确定
  </button>
   <button class="btn btn-info" v-on:click="showDeleteModal=false">
   取消
  </button>
</span>
</delete-modal>

最后请看例子：http://jsfiddle.net/yangjunjun/2hL1m9hp/3/

Answer 2

能否用codepen或者jsfiddle写个在线例子？