Vue 组件引用流程

无情阅读：681 2021-03-31 16:53:00 评论：0

在工程目录/src下创建component文件夹，并在component/home文件夹下创建一个logo.vue并写仿照 App.vue 的格式写一个组件。

<template> 
  <div> 
   vue 组件嵌套 
  </div> 
</template> 
 
<script> 
    export default { 
        name: "logo" 
    } 
</script> 
 
<style scoped> 
 
</style>

在component/Login.vue 组件中使用自定义的logo.vue组件

第一步，引入。在<script></script>标签内的第一行写:

import logo from './home/logo.vue'

第二步，注册。在<script></script>标签内的 name代码块后面加上 components: { logo}

  components: { logo },

第三步：使用。在<template></template>内加上<logo></logo>

<template> 
  <body id="poster"> 
  <logo></logo>

效果截图：

源码效果截图：

标签:VUE

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。