vue2组件化编程

一、模块与组件

模块
1. 理解 :  向外提供特定功能的 js 程序, 一般为一个 js 文件
2. 为什么使用 :  js 文件很多，很复杂
3. 作用 :  复用 js, 简化 js 的编写, 提高 js 运行效率

组件
a：定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
b：为什么使用 ：一个界面的功能很复杂
c：作用：复用编码，简化项目编码，提高运行效率

注意：

组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 ：

如图所式：

有图就更方便我们理解了

二..组件的嵌套：

​
<title>组件的嵌套</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root"></div>

<script type="text/javascript">
  Vue.config.productionTip = false

  //定义student组件
  const student = Vue.extend({
    name: 'student',
    template: `
				<div>
					<h4>学生姓名：{{name}}</h4>	
					<h4>学生年龄：{{age}}</h4>	
  			</div>
			`,
    data() {return {name: '尚硅谷',age: 18}}
  })

  //定义school组件
  const school = Vue.extend({
    name: 'school',
    template: `
				<div>
					<h3>学校名称：{{name}}</h3>	
					<h3>学校地址：{{address}}</h3>	
					<student></student>
 			  </div>
			`,
    data() {return {name: '尚硅谷',address: '北京'}},
    //注册组件（局部）
    components: { student }
  })

  //定义hello组件
  const hello = Vue.extend({
    template: `<h3>{{msg}}</h3>`,
    data() {return {msg: '欢迎来到尚硅谷学习！'}}
  })

  //定义app组件
  const app = Vue.extend({
    template: `
				<div>	
					<hello></hello>
					<school></school>
  			</div>
			`,
    components: { school, hello }
  })

  //创建vm
/这里直接把app组件写在vm的template当中，上面的div内就不需要内容了，注册app
  new Vue({
    el: '#root',
    template: '<app></app>',
    //注册组件（局部）
    components: { app }
  })
</script>

​

模块化
当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

二、组件组成和引用

非单文件组件
1. 模板编写没有提示
2. 没有构建过程, 无法将 ES6 转换成 ES5
3. 不支持组件的 CSS
4. 真正开发中几乎不用

单文件组件
      组件最大的优势就是可复用性，当使用构建步骤时，我们一般会将Vue组件定义在一个单独的 .vue文件中，这被叫做单文件组件(简称SFC)

基本使用：

1.定义组件

●使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别
●el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器
●data必须写成函数，避免组件被复用时，数据存在引用关系
2.注册组件
●局部注册：new Vue()的时候options传入components选项
●全局注册：Vue.component('组件名',组件)
3使用组件
编写组件标签如 <school></school>

例如：

1. 模板页面
<template>
页面模板
</template>2. JS 模块对象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3. 样式
<style>
样式定义
</style>
2.3.2. 基本使用
1. 引入组件
2. 映射成标签
3. 使用组件标签
组件引用

3、VueComponent

关于VueComponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是  Vue.extend生成的。

2.我们只需要写<school/>或<school></school>，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。

例如：

<title>VueComponent</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <school></school>
  <hello></hello>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  // 定义school组件
  const school = Vue.extend({
    name: 'school',
    template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
  			</div>
			`,
    data() {return {name: '尚硅谷',address: '北京'}},
    methods: {showName() {console.log('showName', this)}},
  })

  const test = Vue.extend({
    template: `<span>atguigu</span>`
  })

  // 定义hello组件
  const hello = Vue.extend({
    template: `
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
  			</div>
			`,
    data() {return {msg: '你好啊！'}},
    components: { test }
  })

  // console.log('@',school)
  // console.log('#',hello)

  // 创建vm
  const vm = new Vue({
    el: '#root',
    components: { school, hello }
  })
</script>

 分析Vue与VueComponent的关系

1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

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

 

 组件注意事项

关于组件名
●一个单词组成
○第一种写法（首字母小写）：school
○第二种写法（首字母大写）：School
●多个单词组成
○第一种写法（kebab-case 命名）：my-school
○第二种写法（CamelCase 命名）：MySchool（需要Vue脚手架支持）
●备注
○组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
○可以使用name配置项指定组件在开发者工具中呈现的名字

三.单文件组成

单文件组件
●School.vue
●Student.vue
●App.vue
●main.js
●index.html

暖心提示 ：

安装vetur插件，可以通过输入 <v 快速构建模板

注意：注册组件一定要写在定义好的组件下方，不然会报错（未注册）

每次调用Vue.extend，返回的都是一个全新的VueComponent，即不同组件是不同的对象