30.Vue3：组件基础

加载组件方法：

操作都在根组件中（App.vue）

引入组件: import 组件名（在export中的name） from 组件地址

挂载组件：在export中，给出名称

显示组件：< 组件名称/>

MyComponent.vue

<!-- 
    Vue单文件组件(一个文件.vue就是一个组件),
    必须包含模板(template->HTML)必须存在, 逻辑(script->JS),样式封装(style->CSS)
 -->

 <template>
    <h3>单文件组件测试</h3>
 </template>

 <script>
//导出
 export default{
    // 组件名称, import的内容
    name:"MyComponent"
 }
</script>

<style scoped>
/* 若添加scoped的话, 当前样式仅在当前组件中生效 */
h3{
    color: red;
}
</style>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <MyComponent />
  两种方法都可以,推荐使用下面这种,把大写字母改小写,前面加一个-即可
  <my-component/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyComponent
}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>