Vue.js学习笔记——16.单文件组件
初识
在之前Vue-CLI创建的项目中，看到了新的文件扩展名.vue，称为，是Vue.js自定义的一种文件格式。 在之前的代码中，编写组件的形式都是全局组件，全部逻辑写在一个HTML文件内，这种方式虽然在初步学习的时候方便，但当我们的代码逻辑慢慢复杂，或想要编写更大的项目的时候，就会暴露出很多缺点。 单文件组件的出现很好的解决了这些问题，打开项目中的根组件App.vue可以看到.vue文件由三部分组成：<template>、<style>、<script>
<!-- App.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from ./components/HelloWorld.vue
export default {
name: App,
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
components文件夹下的HelloWorld.vue也是如此，编写子组件时在<template>中编写模板，<script>中导出组件配置，<style>中编写组件样式，然后在父组件中导入引入即可。
上手
接下来我们自己写一个单文件组件。首先把components文件夹下的HelloWorld.vue删除，并且将App.vue内的HelloWorld.vue相关代码删除，简化App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: App,
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在components下创建一个MyCpn.vue文件，往<template>中添加div代码，往<script>中添加Vue实例代码，往<style>中添加组件样式代码。如：
<!-- MyCpn.vue -->
<template>
<p>{
{msg}},{
{name}}</p>
</template>
<script>
export default {
data() {
return {
msg:Hello
}
},
props:{
name:String
}
}
</script>
<style>
p {
font-size: 50px;
}
</style>
需注意： 1.template内部需要有唯一根节点 2.script内部主要是通过es6模块化导出一个对象，内部成员完全参考Vue实例 3.单文件组件里面的data必须写成函数形式，vue中组件是用来复用的，这是为了防止多个组件实例对象之间共用一个 data ，产生数据污染。 4.当<style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
<script>
export default {
data() {
return {
// 此处定义变量
}
},
props:{
},
cpompoents:{
}
}
</script>
<style scoped>
/* 此处的CSS只作用于当前组件 */
p {
color: red;
}
</style>
接下来，在App.vue的<script>中导入并引用文件，在<template>中使用组件
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 使用组件 -->
<my-cpn name="marmot"></my-cpn>
</div>
</template>
<script>
// 导入MyCpn
import MyCpn from ./components/MyCpn.vue
export default {
name: App,
// 引入组件
components: {
MyCpn
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
运行项目，即可看到组件已经渲染成功