Vue 组件 - Vue3版本组件-CSDN博客

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件 - Vue3版本组件

Vue3组件

实例化

使用Vue3写法实例化及挂载。

示例如下：

<script src="../lib/vue.next.js"></script>
<script>
    let obj = {
        data() {
            return {
                myname:"Li"
            }
        },
        // 方法
        methods: {

        },
        // 计算属性
        computed:{

        }
    }
    // 挂载
    Vue.createApp(obj).mount("#box")
</script>

注册组件

使用点语法，component创建组件。

示例如下：

Vue.createApp(obj)
    .component("navbar", {
        
    })
    .mount("#box")

还可以改为

let app = Vue.createApp(obj)
app.component("navbar", {
    props: ["myname"],
    template:`
      <div>
        navbar-{{myname}}
        <slot></slot>
      </div>
    `
})

app.component("sidebar", {
    props: ["myname"],
    template:`
      <div>
        sidebar
      </div>
    `
})

app.mount("#box")

生命周期

Vue3版本的生命周期与版本2的大致相同，只是销毁阶段不同。

销毁阶段替换为去掉挂载阶段。

示例如下：

let obj = {
    data() {
        return {
            myname:"Li"
        }
    },
    // 方法
    methods: {

    },
    // 计算属性
    computed:{

    },
    created() {

    },
    mounted() {

    },
    beforeUnmount() {
        // 替换 beforeDestroy()
    },
    unmounted() {
        // 替换 destroyed()
    }
}

swiper组件

之前的swiper示例改为vue3写法。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../lib/swiper-bundle.css">
</head>
<body>
<div id="box">
  <swiper v-if="datalist.length" :loop="false">
    <!--改为动态数据-->
    <swiper-item v-for="data in datalist" :key="data">
      <img :src="data" alt="">
    </swiper-item>
  </swiper>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.next.js"></script>
<script>
  let obj = {
    data() {
      return {
        datalist:[]
      }
    },
    mounted() {
      // ajax
      setTimeout(()=> {
        this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
          "https://tsj.youdubook.com/cover/book_cover_6.jpg",
          "https://tsj.youdubook.com/cover/book_cover_265.jpg",
          "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
          "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
      }, 2000)
    }
  }

  let app = Vue.createApp(obj)

  app.component("swiperItem", {
    template:`
        <div class="swiper-slide">
            <slot></slot>
        </div>
        `
  })

  app.component("swiper", {
    props:{
      loop: {
        type:Boolean,
        default:true
      }
    },
    template:`
        <div class="swiper-container demo">
            <div class="swiper-wrapper">
              <slot></slot>
            </div>
            <div class="swiper-pagination"></div>
      </div>`,

    // 组件挂载后 直接示例swiper
    mounted() {
      new Swiper(".demo", {
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        loop: this.loop,
        autoplay: {
          delay: 2500,
          disableOnInteraction:false
        }
      })
    }
  })

  app.mount("#box")
</script>
</body>
</html>