1.3 Vue组件的核心概念：事件

1. 使用v-on进行dom事件监听

   <script>
   
           Vue.component('todo-item', {
               // 属性声明
               props: {
                   title: String,  // 直接定义类型，没有默认值
                   del: {
                       type: Boolean,  // 定义类型
                       default: false  // 默认值
                   },
               },
               // 绑定对象 
               data: function() {
                   return {}
               },
               // 方法
               methods: {
                   handleClick() {
                       console.log("点击了删除按钮")
                       // 向外抛出事件，以及丢出参数
                       this.$emit('remove-delete', this.title)
                   }
               },
               // 模板
               template: `
                   <li>
                       <span v-if="!del">{{title}}</span>
                       <span v-else style="text-decoration: line-through;">{{title}}</span>
                       <button v-show="!del" @click.stop=handleClick>删除</button>
                   </li>
               `
           })
   
           Vue.component('todo-list', {
               template: `
                   <ul>
                       <todo-item @remove-delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item>
                   </ul>
               `,
               data: function() {
                   return {
                       list: [{
                           title: '课程1',
                           del: false,
                       },{
                           title: '课程2',
                           del: true,
                       }]
                   }
               },
               methods: {
                   handleDelete(val) {
                       console.log("handleDelete点击了删除", val)
                   }
               }
           })
   
           var vm = new Vue({
               el: '#app',
               data: {
                   message: 'hello world'
               }
           })
       </script>

   备注：

   1. v-on可以简写成@

         2. 组件中向外抛出时间，可以在方法中使用`this.$emit('接受的监听', 参数)`进行向外抛出(接收的监听事件标识可以自定义)
         	3. 事件的监听可以禁止向外冒泡等修饰，具体可以查看官方，这里用的`.stop`就是禁止向外冒泡

2. 修饰符事件有很多，可以通过官网进行查看