组件的使用:全局、私有

全局组件使用

创建@/components/Count.vue,定义其内容

①main.js

导入

import Count from '@/components/Count.vue'

声明

Vue.component('myCount', Count) //这里的myCount才是在其他组件中能调用的名字
②App.vue
<myCount></myCount>

私有组件使用

先创建一个@/components/Test.vue

在App.vue中:导入、注册、标签调用

script导入、注册

<script>
// 1. 导入需要使用的 .vue 组件
import Test from '@/components/Test.vue'

  // 2. 注册组件
  components: {
    Left,
    Right,
    Test
  }
}
</script>

template标签调用

<template>
  <div >
      <!-- 3. 以标签形式,使用注册好的组件 -->
      <Test></Test>
  </div>
</template>
posted @ 2023-03-15 12:02  Dinesaw  阅读(30)  评论(0编辑  收藏  举报