插槽slot


v-bind和v-on的简写：


<body>

<div id="app">
    <todo>
      <todo-title slot="todo-title" :title="titleName"></todo-title>
      <todo-book slot="todo-book" v-for="books in bookName" :book="books"></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'],
    template:'<li>{{book}}</li>'
  });


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

</body>








posted @ 2022-03-04 10:40  卡卡发  阅读(31)  评论(0)    收藏  举报