Vue学习：组件的编写模式之一：非单文件组件

非单文件组件：一个文件(a.html)中包含有n个组件

单文件组件：一个文件（a.vue）中包含1个组件

分成3步：

创建组件

    //1、创建student组件
    const student = Vue.extend({
        template:`
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {//防止相同对象改变
                studentName: '张三',
                age: 12
            }

        },
    })
    //1、创建school组件
    const school = Vue.extend({
        template:`
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{adress}}</h2>
            <button @click="showName">点我提示学校信息</button>
        </div>
        `,//结构
        data() {
            return {//防止相同对象改变
                schoolName: 'xxxx学校',
                adress: 'xxx街道',
            }

        },//数据
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })

注册组件（局部注册）

    const vm = new Vue({
        el: '#root',
        data:{
            msg:'仍然可以写'
        },
        //2、注册组件 （局部注册）
        components:{
            xuexiao:school,
            xuesheng:student

        }


    });

全局注册

    const hello = Vue.extend({
        template: `<h1>你好{{name}}</h1>`,
        data() {
            return {
                name: 'sjhso'
            }
        }
    })
    //2、注册组件 （全局注册）
    Vue.component('hello1', hello)

编写组件标签

    
    <div id='root'>
    <!-- 编写组件标签 -->
    <xuexiao></xuexiao>
    <hr>
    <xuesheng></xuesheng>
    <hr>
    <h2>{{msg}}</h2>
    <hr>
    <h2>复用</h2>
    <xuesheng></xuesheng>
    </div>

定义组件3步骤：定义组件、注册组件、使用组件

1、如何定义一个组件

使用Vue.extend({配置项})创建，去欧洲配置项和new Vue()传入的options几乎一样 但是也有区别：

区别如下：

1、el不要写：原因在于最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

2、data必须写成函数-原因在于避免组件被复用时，数据存在引用关系

备注：使用template可以配置组件结构

2、如何注册组件

1、局部注册：new Vue({ 的配置项components

2、全局注册 Vue.component('组件名', 组件)

3、编写组件标签

组件名标签