持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

一、非单文件组件

1、注意点

关于组件名:
- 一个单词组成：
  - 第一种写法(首字母小写)：school
  - 第二种写法(首字母大写)：School
- 多个单词组成：
  - 第一种写法(kebab-case命名)：my-school
  - 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
- 备注：
  - 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
  - 可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签:
- 第一种写法：<school></school>
- 第二种写法：<school/>
- 备注：不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式：
- const school = Vue.extend(options) 可简写为：const school = options

<!-- 准备好一个容器-->
<div id="root">
    <h1>{{msg}}</h1>
    <school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip = false

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

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

2、组件的嵌套

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

</div>

<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:'moe',
            age:18
        }
    }
})

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

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

//定义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>

3、VueComponent

关于VueComponent：

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即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。

<!-- 准备好一个容器-->
<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:'moe',
            address:'北京'
        }
    },
    methods: {
        showName(){
            console.log('showName',this)
        }
    },
})

const test = Vue.extend({
    template:`<span>zoe</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>

4、内置关系

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

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

<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:'moe',
            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>

二、单文件组件

1、School 组件

<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>	
    </div>
</template>

<script>
     export default {
        name:'School',
        data(){
            return {
                name:'moe',
                address:'北京朝阳'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
    .demo{
        background-color: orange;
    }
</style>

2、Student 组件

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
     export default {
        name:'Student',
        data(){
            return {
                name:'张三',
                age:18
            }
        }
    }
</script>

3、App 组件

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
    //引入组件
    import School from './School.vue'
    import Student from './Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

4、main.js

import App from './App.vue'

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

5、index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>练习一下单文件组件的语法</title>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root"></div>
    </body>
</html>

三、总结

本篇主要介绍了vue中组件的使用，分为非单文件组件和单文件组件，项目中主要采用单文件组件，职责明确，单一职责，vue中的组件主要包括三部分：模板、js、样式。

后端必备vue知识第十篇

一、非单文件组件

1、注意点

2、组件的嵌套

3、VueComponent

4、内置关系

二、单文件组件

1、School 组件

2、Student 组件

3、App 组件

4、main.js

5、index.html

三、总结