Vue 3 组件基础

组件基础

实验介绍

为什么需要组件?组件是为了方面复用而产生的。

基本实例

比如我们想开发一个可以点击加一的计算按钮,而且这个按钮是到处可以使用的,所以我们需要将他封装成一个组件的方式,这样就可以在各个地方引入,在 src/main.js 写下如下代码:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
let app = createApp(App)
app.use(store).use(router).mount('#app')
app.component('button-counter', {
    template: `<button @click="count">{
   {counter}}</button>`,
    data() {
        return {
            counter: 0,
        }
    },
    methods: {
        count() {
            this.counter++
        }
    }
})

然后在 src/views/TemplateM.vue

<template>
  <div class="templat
05-08 1910
05-06 2122
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值