<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>