【转】VUE 组件注册使用示例

首先是 main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import Swiper from './components/01.globalReg/Swiper.vue'
import Test2 from './components/01.globalReg/Test2.vue'

const app = createApp(App)

app.component(Swiper.name,Swiper)
app.component(Test2.name,Test2)

app.mount('#app')

然后 App.vue

<template>
  <h1>这是 App.vue 根组件</h1>
  <hr />

  <my-swiper></my-swiper>
  <my-test></my-test>
</template>

然后在 src 目录下的 components 目录内新增对应的 vue 文件：

<template>
    <h3>Swiper 轮播图组件</h3>
</template>

<script>
    export default{
        name:'MySwiper'
    }
</script>

<template>
    <h3>Test 组件</h3>
</template>

<script>
    export default{
        name: "MyTest"
    }
</script>

重新运行：

cnpm run dev

在尝试过程中，使用 Test 报错：

Expected A Javascript Module Script But The Server Responded With A Mime Type Of “text/plain”. Strict Mime Type Checking Is Enforced For Module Scripts Per Html Spec

把 Test.vue 改名后尝试又没问题了，再改回来也没问题了。

 

 局部注册组件使用与全局注册一致，只需要修改 App.vue 文件内容：

<template>
  <h1>这是 App.vue 根组件</h1>
  <h3>abc -- {{username}}</h3>

  <hr />

  <my-swiper></my-swiper>
  <my-test></my-test>

  <hr />

  <my-search></my-search>

</template>

<script>

import Search from './components/02.privateReg/Search.vue'

export default {
  name: 'MyApp',
  data(){
    return {
      username: 'zs',
      count: 0
    }
  },
  methods:{
    addCount(){
      this.count += 2
    }
  },
  components: {
    'my-search': Search
  }
} 
</script>