vue学习（二）

组件

组件插槽

• 在自定义组件时通过 slot 标签在组件的模板中定义插槽

Vue.component('header-bar', {
    data: function() {
        return {
            title: "三国 -- √"
        }
    },
    template: `<div class="divStyle">
                <table class="tableStyle">
                    <tr>
                        <td width="200" align="right" valign="middle">
                            <img src="img/1.jpg" class="logoImg" />
                        </td>
                        <td>
                            <label class="nameStyle">
                                登录人： {{name}}
                            </label>
                        </td>
                        <td>
                            <slot></slot>
                        </td>
                        <td>
                            <button @click="childMethod">组件按钮点击次数</button>
                        </td>
                    </tr>
                </table>
            </div>`,
    props: ["name"],
    methods: {
        childMethod: function () {
            this.$emit("my-event", this.title);
        }
    }
});

• 在父组件中调用此组件时，指定插槽填充的模板

示例1：插槽填充 搜索框

<header-bar :name="message">
     <input /> <button>搜索</button>
</header-bar>

具名插槽

当组件中的插槽数量 > 1 时，需要给组件中的 slot 标签添加 name 属性指定插槽的名字

插槽作用域

• 定义组件时，将组件中的数据绑定到 slot 标签

Vue.component('page-frame-scope', {
    template:  `<div>
            <div id="header" style="width: 100%; height: 100px; background: pink">
                {{title}}<br />
                slot1 : <br />
                <slot name="slot1"></slot>
            </div>
            <div style="width: 100%; height: 580px">
                slot2 : <br />
                <slot name="slot2" v-bind:sites="sites"></slot>
            </div>
            <div id="footer" style="width: 100%; height: 40px; background: lightblue">{{cr}}</div>
        </div>`,
    props: ["title", "cr"],
    data: function () {
        return {
            sites: [
                {
                    "name": "菜鸟教程",
                    "url": "www.runoob.com"
                },
                {
                    "name": "google",
                    "url": "www.google.com"
                },
                {
                    "name": "微博",
                    "url": "www.weibo.com"
                }
            ]
        }
    }
});

旧版slot

• 如果在一个组件的标签中再加上一个标签，那么这个标签无法再页面中正常表达出来
• 这时就需要在组件中添加slot

1.未给slot定义名称时，有几个slot就会重复的将组件中的标签表达几次
2.如果定义了名称则会按照名称的顺序来表达出来

• 有了slot，那么组件的复用性则会提升，可以在组件中多放置一些插槽，在不同的文档中使用该组件时，插入不同的东西
• 在父组件中的标签用插槽引入子组件中也可以在父组件中进行编译

新版slot

就是将原来的写法规范

• 将slot=”“换成
• 将slot=”“换成<template # >

swiper

简介

uniapp中的滑块视图容器。一般使用于轮播图、滑动切屏
swiper标签的默认样式：width：100%; height：150px;

使用方法

	<swiper class="swiper"
	:current="current" 
	duration="200"
	@change="onchange">
	</swiper>

    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        .swiper>ul{
            list-style: none;
        }
    </style>
    
    <div class="swiper">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
</div>

let mySwiper = new Swiper ('.swiper');

swiper组件

  <div id="box">
    <swiper v-if="datalist.length" :loop="false">
      <swiper-item v-for="data in datalist" :key="data">
        <img :src="data"/>
      </swiper-item>
    </swiper>

    <!-- <swiper :key="datalist.length"></swiper> -->
  </div>

  <script>

    new Vue({
      el:'#box',
      data:{
          datalist:[]
        
      },
      mounted(){
        setTimeout(()=>{
          this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
          ]
        },2000)
      }
    })
  </script>

vue3组件写法

    <script src="/lib/vue3.global.js"></script>
    
</head>
<body>
    <div id="box">
        {{myname}}
 
        <navbar  myname="aaa">
            <div>11111111</div>
 
        </navbar>
 
        <sidebar>
       
        </sidebar>
    </div>    
 
    <script>
 
        var obj = {
            data(){
                return {
                    myname:"xby"
                }
            },
 
            methods:{
 
            },
 
            computed:{
 
            }
        }
 
      var app = Vue.createApp(obj)
        // 注册组件
      app.component("navbar",{
            post:["myname"],
            template:`
            <div>
            navbar-{{myname}}
            <slot></slot>
            </div>
            `
        })
 
        app.component("sidebar"<{
            template:`
            <div>
            sidebar
            </div>
            `
        })
        
        app.mount("#box")
    </script>
    
</body>
</html>