一、组件规范

命名规范

一个单词：首字母小写或者大写（Vue开发者工具显示的组件名是首字母大写）
多个单词：
第一种写法（kabab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要脚手架支持）
备注：组件名尽可能回避HTML中已有元素的名称
可以使用那么配置项修改开发者工具呈现出的名字

组件标签

第一种写法：<school></school>
第二种写法：<school/>（不使用脚手架时，<school/>会导致后续组件不能渲染）

简写方式

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

二、组件嵌套

代码示例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script>
   Vue.config.productionTip = false

   // 创建组件
   const student = Vue.extend({
    
    
        template: `
        <div>
            <h2>学生名称：{
     
     {studentName}}</h2>
            <h2>学生年龄：{
     
     {Age}}</h2>
        </div>
        `,
        data(){
    
     
            return{
    
    
                studentName:"xiaoming",
                Age: 18
            }
        }
    })

    // 创建组件
    const school = Vue.extend({
    
    
        template:`
        <div>
            <h2>学校名称：{
     
     {schoolName}}</h2>
            <h2>学校地址：{
     
     {Address}}</h2>
            <student></student>
        </div>
        `,
        data(){
    
     
            return{
    
    
                schoolName:"lala",
                Address:"DDDDDDD"
            }
        },
        components: {
    
    
            student
        }
    })
    
    const app = Vue.extend({
    
    
        template:`
            <div>
                <school></school>
            </div>
        `,
        components: {
    
    
            school
        }
    })

   new Vue({
    
    
    template:`<app></app>`,
    el:"#root",
    data: {
    
    
        msg: "你好啊！"
    },
    // 局部注册组件
    components: {
    
    
        app
    }
   })     
</script>
</html>

Vue开发者工具效果图如下所示：
在这里插入图片描述

三、VueComponent

将上文所注册的组件打印出来，可以看到以下内容：
在这里插入图片描述
因此，上文所定义的组件本质上是一个名为VueComponent的构造函数，是Vue.extend生成的；
我们写组件标签，Vue解析时会创建相应的实例对象，即Vue帮我们执行的是new VueComponent(options)；

特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent

关于this指向

组件配置中：data函数、methods函数、watch函数、computed函数，他们的this指向均是VueComponent实例对象；
new Vue(options)配置中：data函数、methods函数、watch函数、computed函数，他们的this指向均是Vue实例对象；

总结

以上就是Vue组件相关内容~

Vue2教程-Vue组件相关

文章目录