Vue非单文件组件

1. Vue使用组件步骤

1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

2. 如何定义一个组件

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

• el不要写，为什么？ -- 最终所有的组件都要经过一个vm的管理, 由vm中的el决定服务哪个容器
• data必须写成函数，为什么？---避免组件被复用时，多个组件实例的数据引用同一份data数据。
• 使用template配置项进行配置组件结构。

备注

template选项里面不能配置<template></template>根节点，扩展：v-if指令可以使用<template></template>

3. 如何注册组件

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

4. 组件命名

4.1 关于组件名

一个单词组成：    
- 第一种写法(首字母小写)： school   
- 第二种写法(首字母大写)： School

多个单词组成：   
- 第一种写法(kebab-case命名)：my-school    
- 第二种写法(CameCase命名)：MySchool(需要Vue脚手架支持)

备注

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

4.2 关于组件标签

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

提示:

如果没有使用Vue脚手架时，会导致后续使用组件不能渲染。

4.3 简写形式

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

5. 使用组件标签

比如前面定义的是名叫school组件，直接在html页面中编写<school></school>
完整的例子：

<div id="editor">
    <!-- 3使用组件-->
    <school></school>
    <student></student>
</div>
</body>
<script>
    Vue.config.productionTip = false
    // 1创建school组件
    const school = Vue.extend({
        // el: "#editor", // 子组件不能加el，首先本身不支持，其次设计成这样是将组件和html解耦，更加灵活
        data() {  // data不能用data:{} 对象式而是函数式, 避免同一个组件多个地方使用引用同一个data对象
            return {
                schoolName: 'demoSchool'
            }
        },
        template: `
            <div>{{schoolName}}</div>
        `
    })

    // 1创建student组件
    const studentA = Vue.extend({
        data() {
            return {
                studentName: 'demoStudent'
            }
        },
        template: `
            <div>{{studentName}}</div>
        `
    })
    // 2注册组件
    const vm = new Vue({
        el: "#editor",
        components:{
            school, // 如果对象中属性的名字和值一样的名字可以简写
            student: studentA
        }
    })
</script>

6. 组件嵌套

<div id="root">
<app></app><!--如果不写，就需要在vm里面配置template节点：'<app></app>'-->
</div>
</body>
<script>
Vue.config.productionTip=false
let student = Vue.extend({
    name:'student',
    template: `
        <div>
            <span>{{studentName}}</span>
            <span>{{studentAddress}}</span>
        </div>
    `,
    data(){
        return{
            studentName:'未知名考生',
            studentAddress:'四川成都'
        }
    }
})
let school = Vue.extend({
    name:'school',
    template: `
        <span>{{schoolName}}</span>
    `,
    data(){
        return{
            schoolName:'清华'
        }
    }
})
const app = Vue.extend({
    name: 'app',
    template: `
        <div>
            <school></school>
            <student></student>
        </div>
    `,
    components:{
        school, student
    }
})
new Vue({
    el:'#root',
    components:{
        app
    }
})
</script>

打开vue-tools工具，可以看到嵌套效果：