<body> <div class="app"> <todo-list></todo-list> {{message}}--{{message+‘,‘+message}} <div :id=‘message‘ v-if="showMessage">{{title}}</div> <div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div> <div :id=‘message‘ v-show="showMessage">{{title}}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component(‘todo-item‘, { props: { title: String, prize: { type: Number, default: 40 } }, template: `<li> <button @click="handleClick">删除</button> 课程名:{{title}} 价格:{{prize}} </li>`, data: function () { return {} }, methods: { //按钮点击事件 handleClick(){ console.log("handleClick"); //向父组件的@delete事件传递this.title参数,在父组件中delete(var){}即可接收到此参数 this.$emit(‘delete‘,this.title); } } }) Vue.component(‘todo-list‘, { template: ` <ul> <todo-item @delete="handleDelete" v-for="item in classList" :title="item.title" :prize="item.prize"></todo-item> </ul> `, methods:{ //@delete对应的事件 handleDelete(val){ console.log("handleDelete",val); } }, data: function () { return { classList: [ { title: ‘课程1‘, prize: 50 }, { title: ‘课程2‘, prize: 80 } ] } } }) var vm = new Vue({ el: ‘.app‘, data: { message: ‘hello world‘, showMessage: false, title: "是否删除", } }) </script> </body>
原文：https://www.cnblogs.com/RoronoaZoro/p/11965184.html