VUE组件与插槽

目录

vue组件

前言

全局组件

属性：

组件给组件传值

组件通信

局部组件

template标签

注意：

为匿名组件赋予名称

vue插槽

前言

vue插槽作用

vue插槽类型

注意：

默认插槽

具名插槽

具名插槽的使用

具名插槽的其他使用方式

作用域插槽

父组件内部

子组件内部

vue组件

组件系统可以让我们独立的复用小组件来构建大型应用，几乎任何类型的应用界面都可以抽象为一个组件树

前言

1. 组件生效于vue的挂载区内，不管是全局还是局部
2. 自定义组件的内部不可以写内容，除非你用插槽
3. 组件内部，只能有一个根元素 
4. 组件也可以直接写成自闭标签，但是这样写，那么后面的组件便不再生效
5. 决定组件是块级元素还是行级元素与里面的根标签有关

全局组件

含义：所有vue的实例都可以使用的组件

语法：Vue.component(tagName,options)

属性：

• tagName：组件名，其为一个字符串
• options：组件对象（组件对象的value值类型为字符串）

组件给组件传值

全局组件内部props属性，里面传一个数组，用来接收组件的变量 ，用于给自定义组件内部传值 

组件通信

触发自定义事件：this.$emit("事件名称",参数信息)

注意：全局组件定义一定要放到所有vue对象的前面才可对所有vue对象生效

局部组件

含义：只能在特定vue对象挂载区内使用的组件

属性components：组件对象

template标签

注意：

1. template标签只能用在vue挂载区内才可显示组件里面的内容
2. 组件是组件，不是标签，不可以通过标签名选择器来修改样式，但是可以在组件中设置id通过id选择器来设置样式
3. 用template标签以及内部内容共同构成一个组件，为匿名组件
4. template标签组成的匿名组件是一种全局组件，其只要放到有vue挂载的地方就能用

为匿名组件赋予名称

具体做法：为template标签设置一个id属性，在组件中通过选择器的方式进行引入

vue插槽

前言

插槽标签：

vue插槽作用

1. 父组件向子组件传递内容
2. 扩展、复用、定制组件

vue插槽类型

1. 默认插槽
2. 命名插槽
3. 作用域插槽

注意：

1. vue的自定义组件内部不可以写内容，如果写了内容则不会生效，但是当组件内部定义了后slot内部就可以写内容了，甚至可以写标签（也可以解析）
2. 组件内部定义了几个插槽，那么组件内部书写的内容便会显示几次（理解：插槽只能有1个就是自定义组件的书写区域，如果定义了多个插槽，那么就会多次显示这个区域书写的内容）
3. 插槽里的内容为默认值，如果自定义的组件写内容了，那么默认值将会被覆盖

默认插槽

含义：没有名字的插槽 

    

        
一条狗
    

具名插槽

含义：具有名字的插槽

具名插槽的使用

子组件内部加：

注意：上面的v-slot:a可以写成#a

注意：如果组件内部定义了具名插槽而没有定义默认插槽的话，那么自定义组件内部仍然不可以写内容

    

        只会显示默认值
        
            
        
    

具名插槽的其他使用方式

：标识将此组件插入名字为home的插槽

理解：all组件空出两个具名插槽，home和help组件分别作为具名插槽填入all

作用域插槽

作用：子组件向父组件传递内容

使用前提：生成vue模板

父组件内部

            

                //子组件名称
                    
                
            

子组件内部

        data() {
            return {
                name:"lili",
                age:5
            }
        },

理解：

1. name的值被me（名字随意起）保存，me的值在slotprops（随意起的名字）中。
2. v-slot：接插槽名字；default表示默认插槽