Vue3 Vue.component


以下内容仅限于单文件组件

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css';
import App from './App.vue'
import './index.css'
import ButtonCounter from './components/ButtonCounter.vue';

let app = createApp(App)
.use(ElementPlus);


// 方法一:虽然可以全局注册成功,但内容不可见
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
});

// 方法二:可以全局注册成功,内容可见
app.component('button-counter', ButtonCounter)

app.mount('#app');

方法一对应的Vue Devtools显示
在这里插入图片描述
元素中显示如下
在这里插入图片描述

方法二:
在这里插入图片描述
元素中显示如下
在这里插入图片描述

结论:使用单文件组件就好了
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐