Vue的组件

Vue的组件基础

组件的定义

组件的出现是为了拆分Vue实例中的代码，将不同功能的代码写成不同的组件从而实现功能，并提高代码的复用率和JavaScript的模块化开发

创建一个组件的步骤

1. 定义组件
2. 注册组件
3. 应用组件

案例

定义一个student组件通过extend的API如下

const student = Vue.extend({
                template: ` 
            <div>
            <h2>学生名称:{{studentName}}</h2>
            <h2>学生地址:{{address}}</h2>
            </div>`,
                data() {
                    return {
                        studentName: '宋建元',
                        address: '江西'
                    }
                }
            })

注意：在组件的配置中不要指定el，会报错；原因是组件的构建不是只为某一个vue实例的；第二点是data要写成函数

组件的注册

在Vue实例中的components的配置中注册组件
如下是一种局部注册

  var vm = new Vue({
            el: '#app',
            components: {
                // 局部注册
                // 注意：当用一个单词时，要小写或则首字母大写，多个单词可以'my-school'或则MySchool（脚手架中使用）
                student: student,
                
            }
        });

组件的使用

 <div id="app">
       <student></student>
 </div>

组件定义的简写方式

const school=Vue.extend(option)等价于const school=options

组件的嵌套

组件是可以嵌套使用的
定义两个组件分别是school和student组件，可以在school组件中的components配置中将student组件进行注册，然后在template中就可以直接应用了，在正常的开发中我们通常使用一个app组件管理所用的组件

const student = Vue.extend({
                template: ` 
            <div>
            <h2>学生名称:{{studentName}}</h2>
            <h2>学生地址:{{address}}</h2>
            </div>`,
                data() {
                    return {
                        studentName: '宋建元',
                        address: '江西'
                    }
                }
            })

        const school = Vue.extend({
            template: ` 
            <div>
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
                <button @click="showname">点我提示</button>
                <student></student>
            </div>
            `,
            data() {
                return {
                    name: '赣南科技学院',
                    address: '赣州',
                }
            },
            methods: {
                showname() {
                    alert(this.name)
                }
            },
            components:{
                student:student
            }
        })