【Vue】组件基础

目录

Vue 非单文件组件 和 单文件组件 的区别与实践对比

✨ 引言

一、非单文件组件

1. 基本使用

2. 注意：

3. 组件的嵌套

4. 关于VueComponent：

5. 一个重要的内置关系（有点难理解）

二、 单文件组件

那就期待下一章！！！总结不易~ 本章节对我有很大收获 希望对你也是！！！！

---

Vue 非单文件组件 和 单文件组件 的区别与实践对比

✨ 引言

在学习 Vue 的过程中，我们经常会接触到两种不同的写法：一种是在 HTML 中用

2. 注意：

1.关于组件名:

       一个单词组成：

• 第一种写法(首字母小写)：school
• 第二种写法(首字母大写)：School

       多个单词组成：

• 第一种写法(kebab-case命名)：my-school
• 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

        备注：

• 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
• 可以使用name配置项指定组件在开发者工具中呈现的名字。

     

2.关于组件标签:

• 第一种写法：
• 第二种写法：
• 备注：不用使用脚手架时，会导致后续组件不能渲染。

     

3.一个简写方式：

•   const school = Vue.extend(options) 可简写为：const school = options

  

    
欢迎来到{{msg}}学习
    
  

3. 组件的嵌套

• 就是将单个组件全部放入一个app组件内

  // 定义student组件
  const student = {
    template: `
      

        
学生名称：{{studentName}}
        
学生年龄：{{age}}
      
    `,
    data() {
      return {
        studentName: 'wshha',
        age: 18
      }
    }
  }

  // 定义school组件
  const school = {
    template: `
      

        
学校名称：{{schoolName}}
  
        
学校地址：{{address}}
  
        
      
    `,
    data() {
      return {
        schoolName: '武汉传媒学院',
        address: '湖北武汉'
      }
    },
    // 注册组件（局部）
    components: {
      student
    }
  }

  // 定义hello组件
  const hello = {
    template: `
    
欢迎来到{{name}}学习!
    `,
    data() {
      return {
        name: '武汉传媒学院'
      }
    }
  }

  // 定义app组件
  const app = {
    template: `
      

        
        
      
    `,
    components: {
      school,
      hello
    }
  }



  new Vue({
    template: `
      
    `,
    el: '#root',
    components: {
      app
    }
  })

4. 关于VueComponent：

1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2. 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
4. 关于this指向：

(1).组件配置中：

                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：

                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

              Vue的实例对象，以后简称vm。

5. 一个重要的内置关系（有点难理解）

1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

二、 单文件组件

可以分为4个部分：小组件 Students.vue、School.vue 和 index.html 以及 main.js 最后将两个小组件都放入App.vue进行整合 

App.vue: 进行组件引入

main.js:进行引入组件后调用

import App from './App.vue'

new Vue({
	el:'#root',
	template:``,
	components:{App},
})

写到这里， 留一个悬念 其实这里并跑不起来 ！必须要在脚手架的环境下才能运行 ~

那就期待下一章！！！总结不易~ 本章节对我有很大收获 希望对你也是！！！！