Vue组件01

1. 非单文件组件

创建组件的三个步骤：

• 第一步：定义组件
• 第二步：注册组件
• 第三步：编写组件标签

1.1 局部非单文件组件

<script>
    //第一步：创建组件
    //创建school组件
    const school=Vue.extend({
        //一定不要写el配置项，因为最终的所有组件都要被一个vm管理，由vm决定服务于哪个容器
        //el:'#root',
        template:`
            <div>
                <h2>学校名称:{{schoolName}}</h2>
                <h2>学校地址:{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        //data必须写成函数，避免组件被复用时，数据存在引用关系。
        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
            }
        }
    })

    var vm = new Vue({
        el: '#root',
        //注册组件（局部注册）
        components:{
            school:school,
            student:student
        }
    });
</script>

<div id="root">
	<!--第三步：编写组件标签-->
	<school></school>
	<hr>
	<student></student>
</div>

1.2 全局非单文件组件

<script>
	const hello=Vue.extend({
        template:`
            <div>
                <h2>你好啊{{name}}</h2>
            </div>
        `,
        data(){
            return {
                name:'Tom'
            }
        }
    })
    //注册全局组件
    Vue.component('hello',hello)

	var vm2 = new Vue({
        el:'#root2'
    })
</script>

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

1.3 组件的嵌套

代码：

<script>

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

    //创建school组件
    const school=Vue.extend({
        template:`
            <div>
                <h2>学校名称:{{schoolName}}</h2>
                <h2>学校地址:{{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
                schoolName:'清华大学',
                address:'北京'
            }
        },
        components:{
            //注册组件
            student:student
        }
    })

    var vm = new Vue({
        el: '#root',
        //注册组件（局部注册）
        components:{
            school:school
        }
    });
</script>

<div id="root">
	<school></school>
</div>

效果：

将student注册到school组件中，会发现，student组件的标签变成了school的子标签。

1.4 VueComponent

关于VueComponent：

1. school组件实际上是一个名为VueComponent的构造函数，且是Vue.extend生成的。
2. 我们只需要写或，vue解析时，会帮我们创建school组件的实例对象。
   即vue帮我们执行的：new VueComponent(options)。
3. 每次调用Vue.extend,返回的都是一个全新的VueComponent。
4. 关于this指向
   (1) 组件配置中
   data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象。
   (2) new Vue(optiions)配置中
   data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是Vue实例对象。

<div id="root">
	<school></school>
	<hello></hello>
</div>

<script>
    //定义school组件
    const school=Vue.extend({
        template:`
            <div>
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data(){
            return {
                name:'清华大学',
                address:'北京'
            }
        },
        methods:{
            showName(){
                console.log('showName',this)
            }
        }
    })

    //定义hello组件
    const hello=Vue.extend({
        template:`
            <h2>{{msg}}</h2>
        `,
        data(){
            return {
                msg:'你好啊'
            }
        }
    })

    console.log('@',school)
    console.log('#',hello)

    new Vue({
        el:'#root',
        components:{
            school:school,
            hello:hello
        }
    })
</script>

1.5 一个重要的内置关系

• 一个重要的内置关系：VueComponent.prototype.proto===Vue.prototype。
• 目的：让组件实例对象可以访问到Vue原型上的属性、方法。

2. 单文件组件

先定义两个组件，分别是School和Student。
School.vue

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    // 组件交互相关代码（数据、方法等）
    export default {
        name:'School',
        data(){
            return {
                name:'清华大学',
                address:'北京'
            }
        },
        methods:{
            showName(){
                alert(this.name)   
            }
        }
    }
</script>

<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

Student.vue

<template>
    <!-- 组件的结构 -->
    <div>
        <h2>学生姓名:{{name}}</h2>
        <h2>学生年龄:{{age}}</h2>
    </div>
</template>

<script>
    // 组件交互相关代码（数据、方法等）
    export default {
        name:'Student',
        data(){
            return {
                name:'张三',
                age:18
            }
        }
    }
</script>

定义一个App组件，用来管理School和Student组件。
App.vue

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

在main.js中注册App组件。
main.js

import App from './App.vue'

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

index.html

<html>
    <head>
        <meta charset="UTF-8" />
        <title>单文件组件语法</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script type="text/javascript" src="./main.js"></script>
    </body>
</html>