Vue 组件引用流程解析

无情 阅读:209 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>

效果截图:

源码效果截图:

声明

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

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们