Vue单文件组件基础模板小结

背景

相信大家在使用Vue开发项目时，基本都是以单文件组件的形式开发组件的，这种方式好处多多：

1.代码集中，便于开发、管理和维护

2.可复用性高，直接将vue文件拷贝到新项目中

我暂时就想到这两点，童鞋们可以在评论里帮我补充；因为有这么多优点，所以决定有必要将vue组件的常用配置项提炼出来，形成一个组件模板，方便日后项目开发复用

 <template>
 <div>
  <h1>{{title}}</h1>
  <ChildComponents></ChildComponents>
 </div>
</template>
<script>
//子组件要提前引入，才可使用
import ChildComponents from './ChildComponents.vue'
//也可引入一些公共Js脚本或类库
import Cookie from '../lib/cookie.js'

//Js部分尽量采用ES6语法，webpack babel插件会转义兼容
export default {
 //组件私有数据（必须是function，而且要return对象类型）
 data () {
  return {
   title: '组件标题',
   firstName: '',
   lastName: '',
  }
 },
 //父组件传递过来的数据（两种方式声明：1.数组 2.对象）
 //数组方式
 props: ['age'],
 //对象方式
 /*props: {
  age: {
   type: Number,
   default: 0,
   required: true,
   validator: function (value) {
    return value >= 0
   }
  }
 }*/
 //计算属性
 computed: {
  fullName () {
   return this.firstName + this.lastName
  }
 },
 //监听
 watch: {
  title (preVal, newVal) {
    console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`)
  }
 },
 //函数集，自己封装，便于开发使用
 methods: {
  getCurrentDate () {
   return new Date().toLocaleDateString()
  }
 },
 //生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
 beforeCreated () {
  console.log('component before created')
 },
 //生命周期钩子：组件实例完成创建之后调用
 created () {
  console.log('component created')
 },
 //生命周期钩子：组件实例渲染完成时调用
 mounted () {
  console.log('component mounted')
 },
 //要用到哪些子组件（如果组件已是最小粒度，那么可省略该属性）
 components: {
  ChildComponents
 }
}
</script>
<style lang="scss" scoped>
/**使用scss编写样式，既可提高开发效率，也方便维护
* scoped省略后，该样式片段会应用到页面全局
* 支持import语法引入css文件
*/
@import "../base/reset.css";
div {
 h1 {
  color: #c23a3f;
 }
}

</style>

结语

以上组件模板中的配置不是最全的，但都是最常用的，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue单文件组件 # vue.js # 单文件组件 # Vuejs 单文件组件实例详解 # vuejs 单文件组件.vue 文件的使用 # 解决vue 单文件组件中样式加载问题 # Vue单文件组件的如何使用方式介绍 # Vuejs实现带样式的单文件组件新方法 # 基于Vue单文件组件详解 # 详解Vue 单文件组件的三种写法 # 关于单文件组件.vue的使用 # vue实现一个单文件组件的完整过程记录 # 复用 # 都是 # 两种 # 帮我 # 也可 # 要用 # 已是 # 有必要 # 既可 # 最全 # 才可 # 最常用 # 大家多多 # 开发项目 # 日后 # 这两点 # 类库 # 童鞋 # 性高 # 拷贝到

返回目录在线咨询

上一篇：什么是市场细分及其策略_SEO优化教程
下一篇：企业自助建站系统如何快速打造官网？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Vue单文件组件基础模板小结

您的项目需求