Vue.js学习笔记——16.单文件组件

原创已于 2022-05-16 16:01:02 修改 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #elementui

于 2022-05-16 15:45:54 首次发布

Vue.js学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍了Vue.js中的单文件组件（SFC）概念，通过分析App.vue和HelloWorld.vue组件，展示了SFC的结构，包括<template>、<script>和<style>三个部分。讲解了如何创建和使用自定义组件MyCpn.vue，强调了data必须为函数形式以及scoped样式的作用域限制。最后，演示了在App.vue中导入并使用MyCpn组件的过程，以及项目运行后的效果。

初识

在之前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>