嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战 (opens new window)」

今天我们主要来学习Vue中的组件的概念

# 0. 组件的概念

传统方式编写应用

存在问题：

依赖关系混乱，不好维护
代码复用率不高

在这里插入图片描述

使用组件方式编写应用在这里插入图片描述

组件的定义——实现应用中局部功能代码和资源的集合在这里插入图片描述

# 1 非单文件组件

# 1.1 使用组件的三大步骤

定义组件（创建组件）
注册组件
使用组件（写组件标签）

# 1.2 如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue（options)时传入的那个options几乎一样，但有以下区别

不要写el——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数——避免组件被复用时，数据存在引用关系

【备注】使用tempalte可以配置组件结构

# 1.3 如何注册组件

局部注册：new Vue的时候传入components选项
全局注册：Vue.component('组件名', 组件)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>基本使用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <hello></hello>
    <hr>
    <h1>{{msg}}</h1>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <school></school>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <student></student>
  </div>

  <div id="root2">
    <hello></hello>
  </div>
</body>

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

  //第一步：创建school组件
  const school = Vue.extend({
    template: `
        <div class="demo">
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>	
        </div>
	`,
    // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京昌平'
      }
    },
    methods: {
      showName() {
        alert(this.schoolName)
      }
    },
  })

  //第一步：创建student组件
  const student = Vue.extend({
    template: `
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
	`,
    data() {
      return {
        studentName: '张三',
        age: 18
      }
    }
  })

  //第一步：创建hello组件
  const hello = Vue.extend({
    template: `
        <div>	
            <h2>你好啊！{{name}}</h2>
        </div>
	`,
    data() {
      return {
        name: 'Tom'
      }
    }
  })

  //第二步：全局注册组件
  Vue.component('hello', hello)

  //创建vm
  new Vue({
    el: '#root',
    data: {
      msg: '你好啊！'
    },
    //第二步：注册组件（局部注册）
    components: {
      school,
      student
    }
  })

  new Vue({
    el: '#root2',
  })
</script>

</html>

# 1.4 注意点

关于组件名

一个单词组成

第一种写法（首字母小写）：school

第二种写法（首字母大写）：School

多个单词组成第一种写法（kebab-case命名）：my-school

第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

备注 ① 组件名尽可能回避HTML中已有的元素名称，例如h2、H2

② 可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签

第一种写法：<school></school>

第二种写法：<school/> (不使用脚手架会导致后续组件不能渲染)

简写方式 const school = Vue.extend(options) 可以简写成 const school = options

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>几个注意点</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <h1>{{msg}}</h1>
    <school></school>
  </div>
</body>

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

  //定义组件
  const s = Vue.extend({
    name: 'atguigu',
    template: `
        <div>
            <h2>学校名称：{{name}}</h2>	
            <h2>学校地址：{{address}}</h2>	
        </div>
	`,
    data() {
      return {
        name: '尚硅谷',
        address: '北京'
      }
    }
  })

  new Vue({
    el: '#root',
    data: {
      msg: '欢迎学习Vue!'
    },
    components: {
      school: s
    }
  })
</script>

</html>

# 1.5 组件嵌套

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>组件的嵌套</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

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

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

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

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

  //创建vm
  new Vue({
    template: '<app></app>',
    el: '#root',
    //注册组件（局部）
    components: {
      app
    }
  })
</script>

</html>

# 2. VueComponent

app组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写<app/>或<app></app>，Vue解析时会帮我们创建app组件的实例对象，即Vue帮我们执行new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
关于this指向 ① 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】 ② new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
Vue的实例对象，以后简称为vm

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>VueComponent</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <school></school>
    <hello></hello>
  </div>
</body>

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

</html>

一个重要的内置关系

VueComponent.prototype.__proto__ === Vue.prototype

这样组件实例对象vc就可以访问到Vue原型上的属性和方法

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>一个重要的内置关系</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <school></school>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  Vue.prototype.x = 99

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

  //创建一个vm
  const vm = new Vue({
    el: '#root',
    data: {
      msg: '你好'
    },
    components: {
      school
    }
  })


  //定义一个构造函数
  /* function Demo(){
  	this.a = 1
  	this.b = 2
  }
  //创建一个Demo的实例对象
  const d = new Demo()

  console.log(Demo.prototype) //显示原型属性

  console.log(d.__proto__) //隐式原型属性

  console.log(Demo.prototype === d.__proto__)

  //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
  Demo.prototype.x = 99

  console.log('@',d) */
</script>

</html>

# 3. 单文件组件 vue 文件的组成(3 个部分)

# 3.1 组成

模板页面

<template>
	页面模板
</template>

JS 模块对象

<script>
export default {
    data() {return {}},
    methods: {},
    computed: {},
    components: {}
}
</script>

样式

<style>
    样式定义
</style>

# 3.2 基本使用

引入组件
映射成标签
使用组件标签

App.vue

<template>
    <div>
        <HelloWorld></HelloWorld>
        <hello-world></hello-world>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld'
    export default {
        name: 'App',
        components: {
            HelloWorld
        }
    }
</script>

main.js

import App from './App'

new Vue({
    el: '#root',
    component: {App},
})

# 3.3 关于标签名与标签属性名书写问题

写法一: 一模一样
写法二: 大写变小写, 并用-连接

最后，欢迎关注我的专栏，和YK菌做好朋友

指令小知识