Vue3 的页面暴露引入

显示页面

<template>
  <div class="about">
    <!-- 引入组件的第二把钥匙。等同与<NewA></NewA>和</NewA>-->
    <NewA msg="引入NewA组件" />
    <!-- 传递msg值 -->
  </div>
</template>
<!-- template组件，相当于页面，里面必须🈶内容 -->
<script>
//引入组件的第一把钥匙。格式：import 引入组件的名字 from 引入组件的地址。
import NewA from '@/components/NewA.vue'
//export default导出一个模块里面的常量，函数，文件，模块等。export default只能有一个。
export default {
  //这是组件本身的名字，命名必须采用驼峰命名的格式。
  name: 'AboutView',
  //注入函数结构的固定格式，NewA等同于'NewA':NewA。
  components: {
    NewA
  },
}
</script>
<!-- style组件，相当于css，里面必须🈶内容 -->
<style lang="scss" scoped></style>

后台组件

<template>
  <div class="newa">
    <!-- 把值传给显示页面 -->
    <h1>{{ msg }}</h1>
  </div>
</template><!-- template组件，相当于页面，里面必须🈶内容 -->
<script>
export default {
  //这是组件本身的名字，命名必须采用驼峰命名的格式。
  name: 'NewA',
  props: {
    msg: String
  }
  //msg参传的是字符串类型
}
</script><!-- style组件，相当于css，里面必须🈶内容 -->
<style lang="scss" scoped></style>