Vue-cli中的组件

  组件文件位置  

    Vue-cli的组件都写在项目文件夹下的`src`文件夹下的`components`下,每个组件单独一个`.vue`文件。

  基本组件文件结构

   每个组件文件都包含:模版(template)、组件参数、组件样式(style)

// 模版
<template>

</template>
// 组件参数
<script>
export default {
  
};
</script>
// 组件样式
// 在style标签中添加`scoped`,表示该样式只适用于当前组件,如果需要全局适用,则去掉`scoped`即可
<style scoped>

</style>

  在写组件参数时,和在Vue中的写法一样。

  组件文件引用

  1、导入组件文件

  在app.vuescript中使用import语法导入

import 自定义组件名(不一定必须使用vue文件名) from "文件路径";

  2、注册组件

  在app.vue中的`components`中添加刚才自定义的组件名

  1、2两步合起来的示例代码:

 

<script>
import HeaderVue from "./components/header";
export default {
  name: "App",
  components: {
    HeaderVue
  },
};
</script>

 

  3、引用组件

  在app.vue的template中引用组件

<template>
  <div id="app">
    <HeaderVue></HeaderVue>
  </div>
</template>

 

posted @ 2020-02-26 19:40  xsan  阅读(125)  评论(0编辑  收藏