Vue全家桶之组件（component）

1、Vue的标准开发方式

【1】Vue推荐的开发方式是 ------------- SPA（Single Page (Web) Application ） 单页面 Web 应用

【2】什么是 SPA （单页面应用） ？

单页面应用 ：就是日后项目中只有一张页面 =========== 》》 》 index . html

【3】为什么Vue推荐开发方式SPA（单页面应用）的开发方式？

a、引入Vue js 文件

b、在现有的页面中创建一个Vue实例对象

一个页面中只能存在一个 Vue 实例

Vue 推荐的开发方式 ： 一个应用中只能存在一个Vue实例

【4】使用现有的手段严格遵循SPA存在问题？

a、现有的开发方式会导致项目中唯一一个页面中代码会越来越多，不利于维护

b、现有开发方式导致项目中唯一 一个页面中完成全部业务功能，导致当前页面每次加载的速度非常的慢

【5】为了严格遵循SPA开发方式在Vue中提供了　Ｖｕｅ　组件（ｃｏｍｐｏｎｅｎｔ）

组件作用：

1、减少Vue根实例的代码量

2、一个组件负责完成项目中的一个功能或一组功能实现业务功能隔离

3、组件还可以在Vue实现复用

【6】组件如何使用？

a、全局组件：直接注册到vue根实例的组件

Vue.component( ' ' ) // 注册这个就是全局组件

b、局部组件：只能在注册组件中使用的组件

const app = new Vue({

el：" ";

data:{ },

methods:{ },

computed:{ },

created(){ },

components:{ } , // 注册局部组件

})

最大的不同： 作用范围不同 ，如果是全局的，任何地方可用； 如果是局部的，当前组件可用

【7】组件的基本使用

a、全局组件的使用

1）定义组件

Vue.component('login', { //两个参数：参数一：组件名 参数二：组件的配置对象 ​ template:

用户登录

, //用来书写该组件的html代码 ​ });

2）使用组件

< login> < /login>

    

        
{{msg}}
        
        
        
        
    

b、局部组件的使用

1）定义组件

    //定义一个局部组件
    components: {
        add: { // 语法：   组件名：{ template:` `}
            template: `
用户添加
`
        }
    }

2）使用组件

【8】Vue组件中定义组件数据data 、methods、computed、components

组件的生命周期分为四个阶段：

• create（创建）

• mount（挂载）

• update（更新）

• destroy（销毁）

组件中可以定义自己的data 、methods、computed、components、生命周期函数、以及自己的子组件。

    

        
{{msg}}
        
        
        
    

【9】Vue中父组件向子组件传递数据props

日后 Vue开发： 一切皆组件

（1） props 机制：

1、定义：Vue中提供一个特有数据传递机制

2、作用：在使用Vue组件时，如果需要通过父组件给组件传递数据可以通过 props 进行实现

（2） props的使用：

作用：props用来给组件传递相应静态数据或者是动态数据

a、传递静态数据： 在组件使用的标签上声明静态数据 key = value 在组件定义的内部使用props进行接收数据

注意：使用props机制接收数据就相当于自己组件data中声明一个这样的数据

    

        
{{msg}}
        
    

b、传递动态数据

根据属性绑定来实现

单项数据流

    

        
{{msg}}
        
        
        
    

【10】Vue中父组件向子组件传递事件并通过事件子组件传递数据到父组件

 

（1）Vue中父组件向子组件传递事件

在使用组件时，向组件传递事件

1、直接在对应的组件标签上定义 传递的事件即可 @key = value

    

        
{{msg}}
        
    

（2）通过事件子组件传递数据到父组件

1、 标签里边 @aa = " 父级事件 " ，在子组件中通过 this.$emit('aa' ，this.count ) 获取 aa 以及 父级事件，并将子组件中的数据this.count 传入到 父级事件以参数形式接收。

    

        
{{msg}}{{count}}
        
    

【11】组件的插槽使用slot

插槽 ： slot

作用：用来扩展现有的组件，让组件变得更加灵活

插槽：占位

具名插槽 ：带有名字的插槽

默认插槽 ：默认插入全部插槽中

    

        
{{msg}}
        
        
        欢迎进入我们的网站{{msg}}
        

        Welcome come to aa