Vue推荐开发方式是：SPA（single page (web) application）单页面web应用，一个应用中只能存在一个vue实例

严格使用spa存在的问题？

• a.一个页面功能越来越多，代码越多不利于维护
• b.功能增多，页面加载全部功能导致性降低

为处理spa存在的问题，vue引出组件的概念（component）

• 一个组件负责完成项目中一个功能或者一组功能的是实现，保证业务隔离
• 组件还能够复用

组件使用：

• 全局组件：直接注册vue根实例组件

// 参数1:组件名称  参数2：组件的配置对象
Vue.component("login", {
    template:`<h1>用户登录</h1>`   // 用来书写该组件的html代码
})  // 全局组件，任何地方都可用


//使用组件
<login></login>

• 局部组件：只能在注册组件中使用组件

new Vue({
    el: "#app",
    data: {},
    ...
    components:{
        add:{  // 注册局部组件
            template:`<h2>用户添加</h2>`，
            data(){        // 用来定义组件自己的数据 ，然后再template的html代码中可以直接用{{}}进行取值
                return {}
            },
            methods:{},   // 用来定义自己的相关方法
            computed:{}，   // 用来定义自己的计算属性
            components:{},  // 用来定义自己的子组件
            beforeCreate(){}   // 用来定义自己的生命周期方法
            ....
        }
    }    // 只能在当前组件中使用局部组件
})

// 使用局部组件
<add></add>

注意：无论使用全局组件还是局部组件都必须在template中加入唯一根元素，例如:<div></div>

父组件向子组件传值：

• 传递静态数据，则在组件使用标签上声明静态数据即可，例如key=value,在组件定义内部使用props进行接收数据即可

<login title="我是标题"></login>  # key=value 传递静态数据


const app = new Vue({
    el:"#app",
    data:{},
    components:{  // 创建子组件
        login:{
            template:`<div><h3>用户登录组件-->{{title}}</h3></div>`,   // 使用title
            data(){return {}},
            props:["title"]    // 用来接收父组件给当前组件传递数据 注意：props机制接收数据相当于自己组件data中声明一个这样数据
        }
    }
})

• 传递动态数据，用v-bind或者v-model即可，使用跟静态数据传递使用方式一样

<login :title="title"></login>  # v-bind方式
<input type="text" v-model="title">  # v-model方式


const app = new Vue({
    el:"#app",
    data:{
        title: 我是vue实例管理数据（动态数据）
    },
    components:{  // 创建子组件
        login
    }
})


// 将组件拎出来写也可以
const login={
            template:`<div><h3>用户登录组件-->{{title}}</h3></div>`,   // 使用title
            data(){return {}},
            props:["title"]    // 用来接收父组件给当前组件传递数据 注意：props机制接收数据相当于自己组件data中声明一个这样数据
        }

事件传递：

在使用组件时向子组件传递事件，直接在对应组件标签上定义传递事件即可，例如：@传递事件名="父组件中传递事件名"（@key=value）

<login :title="title" @testParent="testParent"></login>  # v-bind方式


const app = new Vue({
    el:"#app",
    data:{
        title: 我是vue实例管理数据（动态数据）
    },
    methods:{
        // 定义父组件中事件
        testParent(){
            alert("我是父组件上事件")
        }
    }
    components:{  // 创建子组件
        login
    }
})


// 将组件拎出来写也可以
const login={
            template:`<div><h3>用户登录组件-->{{title}}<button @click="testChild">点我去调父组件中某个事件</button></h3></div>`,   // 使用title
            data(){return {}},
            props:["title"]    // 用来接收父组件给当前组件传递数据 注意：props机制接收数据相当于自己组件data中声明一个这样数据
            methods:{
                testChild(){
                    alert("我是子组件中定义事件")
                    // 调用父组件中testParent事件
                    this.$emit("testParent")   // 这个方法用来调用父组件传递过来事件  参数1：调用事件名
                }
            }
        }

子组件向父组件传值：

通过定义传递事件的形式，将子组件中需要传递的值通过事件参数的形式传向父组件即可

<login :title="title" @aaa="testParent"></login>  # v-bind方式


const app = new Vue({
    el:"#app",
    data:{
        title: 我是vue实例管理数据（动态数据）
        count: 0   // 定义父组件需要接收子组件的参数
    },
    methods:{
        // 定义父组件中事件
        testParent(count){
            alert("我是父组件上事件")
            this.count=count   // 接收子组件参数
        }
    }
    components:{  // 创建子组件
        login
    }
})


// 将组件拎出来写也可以
const login={
            template:`<div><h3>用户登录组件-->{{title}}<button @click="testChild">点我去调父组件中某个事件</button></h3></div>`,   // 使用title
            data(){
                return {
                    counter: 12  // 子组件中定义的参数，将这个参数传回父组件
                }
            },
            props:["title"]    // 用来接收父组件给当前组件传递数据 注意：props机制接收数据相当于自己组件data中声明一个这样数据
            methods:{
                testChild(){
                    alert("我是子组件中定义事件")
                    // 调用父组件中aaa事件
                    this.$emit("aaa", this.counter)   // 这个方法用来调用父组件传递过来事件  参数1：调用事件名, 参数2， 参数3
                    
                    // this.$emit("bb", {id:1, name:2})   // 传递一个对象也可以
                }
            }
        }

组件插槽(slot)：

作用：用来扩展现有组件，让组件更灵活使用

具名插槽：带有名字插槽

<login></login>  # 未使用插槽
<hr>

<login><span slot="bb">欢迎进入我们网站</span></login>  #使用插槽bb
<hr>

<login><span slot="aa">welcome to website</span></login>  # 使用插槽aa


const app = new Vue({
    el:"#app",
    data:{},
    components:{  // 创建子组件
        login
    }
})


// 将组件拎出来写也可以
const login={
            template:`<div><slot name="aa"></slot><h3>用户登录</h3><slot name="bb"></slot></div>`,   // 定义两个插槽 aa和bb
            data(){return {}}
        
        }