自定义事件内容分发


参考链接：https://blog.csdn.net/Jzandth/article/details/108781704


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <todo>
    <todo-title slot="todo-title" :title="titleName"></todo-title>
    <todo-book slot="todo-book" v-for="(books,indexs) in bookName" :book="books" v-bind:index="indexs" v-on:rmv="r(indexs)" :key="indexs"></todo-book>
  </todo>
</div>


<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

  Vue.component("todo",{
    template:'<div>' +
            '<slot name="todo-title" ></slot>'+
            '<ul>'+
            '<slot name="todo-book"></slot>'+
            '</ul>'+
            '</div>'
  });
  Vue.component("todo-title",{
    props: ['title'],
    template:'<div>{{title}}</div>'
  });
  Vue.component("todo-book",{
    props:['book','index'],
    template:'<li>{{index}}---{{book}} <button @click="rmv">删除</button></li>',
    methods: {
      rmv: function(index){
        this.$emit('rmv',index);//this.$emit()自定义事件分发
      }
    }
  });


  var vm=new Vue({
    el: "#app",
    data:{
      titleName:"四大名著",
      bookName:['水浒传','西游记','三国演义','红楼梦']

      },
    methods:{
      r: function(index){
        this.bookName.splice(index,1);//一次删除一个元素
      }
    }
  });
</script>

</body>
</html>





posted @ 2022-03-04 12:45  卡卡发  阅读(30)  评论(0)    收藏  举报