一 非单文件组件

组件不是一个单独的vue文件，同时多个组件定义在一个文件当中，这样的写法在实际开发中不常使用。
关于 VueComponent：
1、school组件本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成
2、我们只需要写 的时候，使用这个组件，Vue 解析的时候，就会自动创建School组件的实例对象，即Vue执行了 new VueComponent(options)
3、每次调用Vue.extend，返回都是一个全新的 VueComponent
4、关于 this 指向：
（1）组件配置当中：data函数，methods中的函数，watch中的函数，computed中的函数，它们的指向均是【VC对象】
（2）new Vue(options)配置中：data函数，methods中的函数，watch中的函数，computed中的函数，是【VM对象】
5、VueComponent的实例对象，简称：vc。Vue的实例对象，简称：vm

  1. <!-- 容器，绑定vue -->
  2. <div id="app">
  3.     <school></school>
  4.     <hr>
  5.     <student></student>
  6.     <hr>
  7.     <halo></halo>
  8. </div>
  10. <script>
  11.     Vue.config.productionTip = false
  13.     // 创建组件
  14.     const school = Vue.extend({
  15.         data() {
  16.             return {
  17.                 schoolName: '麻省',
  18.                 schoolAddr: '广州'
  19.             }
  20.         },
  21.         /**
  22.          * 这里的template里面的标签需要使用一个div进行包裹起来
  23.          */
  24.         template: `
  25.           <div>
  26.           <h2>学校名称：{{ schoolName }}</h2>
  27.           <h2>学校地址：{{ schoolAddr }}</h2>
  28.           </div>
  29.         `
  30.     })
  32.     // 创建组件
  33.     const student = Vue.extend({
  34.         data() {
  35.             return {
  36.                 studentName: 'lz',
  37.                 studentAge: 19
  38.             }
  39.         },
  40.         template: `
  41.           <div>
  42.           <h3>学生姓名：{{ studentName }}</h3>
  43.           <h4>学生年龄 {{ studentAge }}</h4>
  44.           </div>
  45.         `
  46.     })
  48.     const halo = Vue.extend({
  49.         template: `
  50.             <div>你好！</div>
  51.         `
  52.     })
  54.     // 全局注册组件的方式，会将当前这个组件注册进所有的VM实例对象当中
  55.     Vue.component('halo', halo)
  57.     // 第一步：创建vue对象
  58.     const vm = new Vue({
  59.         el: "#app",
  60.         data: {
  61.             name: "lz"
  62.         },
  63.         // 第二步：注册组件，将已经创建好的组件放在这里进行注册
  64.         // 这里是 局部注册
  65.         components: {
  66.             school: school,
  67.             student: student
  68.         }
  69.     })
  70. </script>

1.1 组件嵌套

  1. <!-- 容器，绑定vue -->
  2. <div id="app">
  3.     <school></school>
  4.     <hr>
  5. </div>
  7. <script>
  8.     Vue.config.productionTip = false
  9.     // 创建组件
  10.     const student = Vue.extend({
  11.         data() {
  12.             return {
  13.                 studentName: 'lz',
  14.                 studentAge: 19
  15.             }
  16.         },
  17.         template: `
  18.           <div>
  19.           <h3>学生姓名：{{ studentName }}</h3>
  20.           <h4>学生年龄 {{ studentAge }}</h4>
  21.           </div>
  22.         `
  23.     })
  25.     // 创建组件
  26.     const school = Vue.extend({
  27.         data() {
  28.             return {
  29.                 schoolName: '广工',
  30.                 schoolAddr: '广州'
  31.             }
  32.         },
  33.         /**
  34.          * 在 school 组件当中，注册进 student 组件
  35.          * 然后在 div 中进行调用
  36.          */
  37.         template: `
  38.           <div>
  39.           <h2>学校名称：{{ schoolName }}</h2>
  40.           <h2>学校地址：{{ schoolAddr }}</h2>
  41.           <student></student>
  42.           </div>
  43.         `,
  44.         components: {
  45.             student
  46.         }
  47.     })
  49.     // 第一步：创建vue对象
  50.     const vm = new Vue({
  51.         el: "#app",
  52.         data: {
  53.             name: "lz"
  54.         },
  55.         // 第二步：注册组件，将已经创建好的组件放在这里进行注册
  56.         // 这里是 局部注册
  57.         components: {
  58.             school
  59.         }
  60.     })
  61. </script>

二 单文件组件

这里定义了很多个文件，在实际开发中常用
这些文件并不能直接被浏览器进行解析执行，需要放置在vue脚手架中才能进行读取

1丶main.js

  1. import App from './App'
  3. new Vue({
  4.     el: '#app',
  5.     components: {
  6.         App
  7.     },
  8.     template: `<App></App>`,
  9.     data() {
  10.         return {}
  11.     }
  12. })

2丶index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>单文件组件语法</title>
  6. </head>
  7. <body>
  9. <!--
  10.     浏览器不能直接解析ES6语法
  11. -->
  12. <div id="app"></div>
  14. <script src="../../js/vue.js"></script>
  15. <script src="./main.js"></script>
  17. </body>
  18. </html>

3丶School.vue

  1. <template>
  2.   <div>
  3.     <h3>学校名称：{{ name }}</h3>
  4.     <h3>学校地址：{{ addr }}</h3>
  5.     <button @click="say"></button>
  6.   </div>
  7. </template>
  9. <script>
  10. /**
  11.  * 默认暴露，跟ES6的模块化有关系
  12.  */
  13. export default {
  14.   name: "School",
  15.   data() {
  16.     return {
  17.       name: '广工',
  18.       addr: '广州'
  19.     }
  20.   },
  21.   methods: {
  22.     say() {
  23.       console.log('I from : ', this.name)
  24.     }
  25.   },
  26.   component: {}
  27. }
  28. </script>
  30. <style scoped>
  32. </style>

4丶App.vue

  1. <template>
  2.   <div>
  3.     <School></School>
  4.   </div>
  5. </template>
  7. <script>
  8. import School from './School'
  10. export default {
  11.   name: "App",
  12.   // 注册组件
  13.   components: {
  14.     School
  15.   }
  16. }
  17. </script>
  19. <style scoped>
  21. </style>