- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <script src="https://cdn.bootCSS.com/vue/2.4.2/vue.min.js"></script>
- <title>todolist</title>
- </head>
- <body>
- <div class="root">
- <input type="text" v-model="msg"/>
- <button @click="submit"> 提交 </button>
- <ul>
- <item-todo
- v-for='(item,index) in lists'
- :key="index"
- :content="item"
- :index='index'
- @reduce="clickdelete(index)"
- ></item-todo>
- <!-- 父组件监听子组件的删除事件, 父组件通过属性传递参数给子组件, 子组件通过 props 接收之后才能使用 -->
- <!-- <li v-for="(item,index) in lists">{{item}} <button @click="delet(index)"> 删除 </button> </li> -->
- </ul>
- </div>
- <script>
- Vue.component('item-todo',{
- props:['content','index'],
- template:'<li @click="aa">{{content}}</li>',
- methods:{
- aa:function(){
- console.log("我被点击了, 每一个对象都是一个实例");
- this.$emit('reduce',this.index);// 向父组件传送点击的事件, 并且传递 index 参数, 发布订阅事件
- }
- }
- })// 全局组件
- // var todoItem={
- // template:'<li>item</li>'
- // }// 局部组件
- new Vue({
- el:".root",
- // components:{
- // 'item-todo':todoItem
- // },// 注册局部组件
- data:{
- msg:'',
- lists:['1','2']
- },
- methods:{
- submit:function(){
- this.lists.push(this.msg)
- this.msg=''
- },
- delet:function(index){
- console.log(21)
- this.lists.splice(index,1)
- },
- clickdelete:function(index){
- this.lists.splice(index,1)
- }
- },
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/48855/75639f90a4f3bf82cdd3b6d05bd37cca.html