zoukankan      html  css  js  c++  java
  • 插槽

    插槽的使用

    <!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">
      <title>Document</title>
      <script src="./../../../vue.min.js"></script>
    </head>
    <body>
      <div id="app">
        <cpn><span>www</span></cpn>
        <cpn><i>我是斜体</i></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
      </div>
      <template id="cpn">
        <div> 
          <h2>标题1</h2>
          <span>玩压缩</span>
          <slot><button>按钮</button></slot>
        </div>
      </template>
      <script>
        const cpn=Vue.extend({
          template:"#cpn"
        })
      new Vue({
        el:"#app",
        components:{
          cpn:cpn
        }
      })
      </script>
    </body>
    </html>

    具名插槽

    <!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">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <cpn><span slot="left"></span></cpn>
        <cpn><span slot="center"></span></cpn>
        <cpn><span slot="right"></span></cpn>
        <cpn></cpn>
      </div>
    <template id="cpn">
      <div>
        <slot><span name="left">左边</span></slot>
        <slot><span name="center">中间</span></slot>
        <slot><span name="right">右边</span></slot>
        <slot><button>按钮</button></slot>
      </div>
    </template>
    
      <script src="./../../../vue.min.js"></script>
      <script>
        const cpn=Vue.extend({
          template:"#cpn"
        })
      const app=new Vue({
        el:"#app",
        components:{
          cpn:cpn
        }
      })
      </script>
    </body>
    </html>

    作用域插槽

    <!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">
      <title>Document</title>
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id="app">
        <cpn>
          <template slot-scope="slot">
            <span v-for="item in slot.data">{{item}} - </span>
          </template>
        </cpn>
    
        <cpn>
            <template slot-scope="slot">
                <span v-for="item in slot.data">{{item}} * </span>
              </template>
        </cpn>
    
        <cpn></cpn>
    
        <cpn>
            <template slot-scope="slot">
                <span>{{slot.data.join(" - ")}}</span>
              </template>
        </cpn>
    
      </div>
    
    <template id="cpn">
     <div>
        <slot v-bind:data="language">
            <ul>
              <li v-for="item in language">{{item}}</li>
            </ul>
          </slot>
     </div>
    </template>
    
      <script>
      const app=new Vue({
        el:"#app",
        components:{
          cpn:{
            template:"#cpn",
          data(){
            return {
            language : ["java","c++","javascript"]
            }
          }
          }
        }
      })
      </script>
    </body>
    </html>

  • 相关阅读:
    软件概要设计
    项目文件-搭建工程
    select标签中设置只读几种解决方案
    PHP ob缓冲区函数的使用
    laravel笔记
    ubuntu系统更新命令
    RBAC权限控制系统
    laravel 数据库获取值的常用方法
    php中获取数据 php://input、$_POST与$GLOBALS['HTTP_RAW_POST_DATA']三者的区别
    php 文件上传 $_FILES 错误码
  • 原文地址:https://www.cnblogs.com/wxy0715/p/12442757.html
Copyright © 2011-2022 走看看