Vue-cli中的组件

Posted 2020-11-25 xshan

　　组件文件位置　　

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

　　基本组件文件结构

　　　每个组件文件都包含：模版（template）、组件参数、组件样式（style）

// 模版
<template>

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

</style>

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

　　组件文件引用

　　1、导入组件文件

　　在app.vue的script中使用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>