vue2.0插槽的使用

Vue2.0插槽的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <mybutton>
        <!-- 插槽的内容指定 -->
        <!-- v-slot：简写 # -->
          <template #title>
               <div>添加信息</div>
          </template>
           保存
          <template #content>
               你好啊!11月
          </template>
          </mybutton>
          <hr>
              <mymenu>
                  <template #cn>产品中心</template>
                  <template #en>PRODUCT CENTER</template>
                  <!-- 解构插槽 -->
                  <template #default="{row,index}">
                    {{index}}  {{row.sortname}}
                 </template>
              </mymenu>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            components:{
                 mybutton:{
                    template:`<div>
                                <h1><slot name='title'></slot></h1>
                                <div><slot name='content'></slot></div>
                                <button>
                                    <!-- 定义插槽时，没有取名字，默认的名字就是default -->
                                  <slot></slot>
                                </button>
                              </div>`
                 },
                mymenu:{
                    data(){
                        return {
                            cate:[
                                {id:20,sortname:'公司新闻'},
                                {id:21,sortname:'行业动态'}
                            ]
                        }
                    },
                    template:`<div>
                                <h1><slot name='cn'></slot></h1>   
                                <p><slot name='en'></slot></p>
                                <ul>
                                    <li v-for='item,i in cate'>
                                        <slot :row='item' :index='i'></slot>
                                    </li>
                                </ul>
                              </div>`
                }
            }
        }).$mount('#app');
    </script>
</body>
</html>

 

posted @ 2024-11-26 10:41  白头吟  阅读(18)  评论(0)    收藏  举报