vue-自定义事件分发

2021 年 05 月 26 日

495 次浏览

236字数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>

<div id="app">

<list>
    <list-title  v-bind:title="msg"></list-title>
    <list-content v-for="(item,ind) in items" :content="item" :index="ind" v-on:dele="removeItem"></list-content>
</list>
</div>

<script>
      Vue.component("list",{
          props:['title'],
          template : '

<div>' +
              '

<ul>'+
              '<slot></slot>'+
              '</ul'+
              '</div>

'
      })
      Vue.component("list-title",{
          props:['title'],
          template : '<el-tag type="success">{{title}}</el-tag>'
      })

      Vue.component("list-content",{
          props:['content','index'],
          template : '<li>{{content}} --{{index}}  <el-button @click="remove(index)" type="danger" icon="el-icon-delete" circle></el-button></li>',
      methods:{
              remove:function(a){
                this.$emit('dele',a)
              }
          }
      })
      var vm=new Vue({
           el: app,
          data:{
               msg: Date.now().toString(),
               items: ['Java','Android','Spring','Shiro','Mysql','Vue',]
          },
          methods: {
               removeItem: function(index){
                   console.log("删除了 ： "+ this.items[index] +" Ok")
                   this.items.splice(index,1)
               }
          }
      })
  </script>
</body>
</html>