今天讲vue讲解专栏里的VUE组件

作者是名退役复学在校大学生，对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究，欢迎关注，和我一起交流。

一、为什么需要组件?

一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块

vue组件化

应用:任何应用都是一颗组件树

1.创建组件

• const cpn = Vue.extend({}):创建一个组件构造器

• template:表示我们组件的模板(其实就是你要显示的html)

• Vue.component('组件名称',构造器cpn)

• 使用:<组件名称>

 

2.创建组件语法糖写法

省去Vue.extend()的调用,可以直接使用一个对象代替

Vue.component("myCpn", {
    template: `
            

            
广告
            
广告内容
            
            `,
});

3.全局组件和局部组件

• 全局组件

  全局注册,实现所有vue都可以使用

• 局部组件

  挂载在某一个vue实例下,其他组件不可以用

4.父组件和子组件

简单理解,在谁的div里面去使用的组件,就是这个对应的子组件

方法二(推荐)

6.组件数据

组件是一个单独功能模块分装

这个模块拥有自己html,data,methons....

data是一个函数

data(){
    retrun {
        
    }
}

7.父子组件通信

(1)父组件向子组件通信

子组件使用props接收父组件传递的参数

props:

• 数组:数组值名称应该是对应的变量名

• 对象(推荐):可以设置传入参数的类型,也可以设置默认

(2)子组件向父组件通信

写一个自定义方法

this.$emit("方法-名称",传递参数)

8.父子组件的访问方式

9.插槽

10.具名插槽

11.作用域插槽