做页面的时候有一些公用的代码作为自定义组件输出
自定义组件又称为自定义标签
项目中components就是组件的意思

在目录中新建目录components

然后新建组件helloComp.vue

  1. <template>
  2.     <view>
  4.     </view>
  5. </template>
  7. <script>
  8.     export default {
  9.         name:"helloComp",
  10.         data() {
  11.             return {
  13.             };
  14.         }
  15.     }
  16. </script>
  18. <style>
  20. </style>

要作为模板使用，因为要被其它页面所调用，所以要定义一个自定义标签

定义组件名称

  1. <template name="helloComp">
  1. export default {
  2.         // 定义组件名称为helloComp
  3.         name:"helloComp",
  4.         data() {
  5.             return {
  7.             };
  8.         }

在页面中做一个输出

data（）是和当前页面的模板数据进行绑定的

  1. data() {
  2.             return {
  4.             };
  5.         }

整个组件呈现

  1. <!-- 定义组件名称为helloComp -->
  2. <template name="helloComp">
  3.     <view>
  5.     </view>
  6. </template>
  8. <script>
  9.     export default {
  10.         // 定义组件名称为helloComp
  11.         name:"helloComp",
  12.         data() {
  13.             return {
  14.                 msg: "这是自定义组件"
  15.             };
  16.         }
  17.     }
  18. </script>
  20. <style>
  22. </style>

外部文件引用

script中引用

  1. import helloComp from "../../components/helloComp.vue";

注册

在export default 中写入

  1. components:{
  2.             helloComp
  3.         }

接下里就可以作为标签使用

  1. <helloComp>xxxxxx</helloComp>