vue中创建单文件组件、注册组件、使用组件

最新推荐文章于 2023-02-04 11:24:10 发布

易安sparkle

最新推荐文章于 2023-02-04 11:24:10 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43675447/article/details/88751569

版权

vue 专栏收录该内容

40 篇文章 4 订阅

订阅专栏

步骤：
（1）生成组件
（2）导入组件，注册组件
（3）使用组件

1.组件的声明：
可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Home.vue

<template>
    <div id="Home">
        <p>{{msg}}</p>
    </div>
</template>
<script>
export default{
    name:"Home",
    data(){
        return{
            msg:"我是Home组件"
        }
    }
}
</script>
<style lang="sass" scoped>
    // scoped 作用于当前的组件样式
</style>

2.组件的挂在与使用
在APP.vue中写入

<template>
  <div id="app">
     <!-- 组件的使用 -->
     <v-Home></v-Home>
  </div>
</template>
<script>
// 导入组件
import Home from './MyComponents/Home.vue'
export default{
  name:"App",
  // 注册组件
  components:{
    'v-Home':Home
  },
  data(){
    return{

    }
  }
}
</script>
<style lang="sass" scoped>
    // scoped 作用于当前的组件样式
</style>