深入理解VUE组件

淩亂°似流年 2023-03-12 09:12 21阅读 0赞

## 组件参数校验（props:\{\}） ##

\*\*props:\*\*可以规范的参数类型为  
**单个参数**：直接写参数类型  
**复数参数**：数组形式 \[ \] ，将每个类型添加进去  
**对象型参数**：  
第一个值为，参数类型（ type: String）  
**type包括**  
**String  
Number  
Boolean  
Array  
Object  
Date  
Function  
Symbol**  
第二个值为，参数是否必须（required: true），true为必须，false为非必须，即如果没有传递 propC 参数，就会报错  
第三个值为，默认值（default: 100），即如果没有传递参数过来，会自动调用默认的值  
**validator**  
可以自定义校验器，对参数进行检查校验

props: { 
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: { 
          type: String,
          required: true
        },
        // 带有默认值的数字
        propD: { 
          type: Number,
          default: 100
        },
        // 带有默认值的对象
        propE: { 
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () { 
            return {  message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: { 
          validator: function (value) { 
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }

## 给组件绑定原生事件（.native修饰符） ##

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。  
这时，你可以使用 **v-on** 的 **.native** 修饰符：

<div id="root">
            <child-components @click="foo"></child-components>
            //在父组件上绑定的事件，是无法被触发的
          //<child-components @click.native="foo"></child-components>
          // 在 事件 type 上加上 .native 的修饰符（如：@click.native），就可以触发了
        </div>
    
        <script>
            var childComponents = { 
                template:"<div>childComponents</div>",
            };
    
            var vm = new Vue({ 
                el:"#root",
                components:{ 
                    childComponents
                },
                methods: { 
                    foo:function(){ 
                        console.log("123");
                    }
                },
            })
        </script>

## 非父子组件之间传值 ##

## 插槽（slot） ##

插槽的使用为，**父组件 —> 子组件（slot）**，  
即 父组件 向 子组件 传递内容，子组件用 **slot** 插槽进行接收

<div id="root">
            <child-com>
                <p>hello</p>
            </child-com>
        </div>
    
    	var childCom = { 
                template:
                    `<div> <slot></slot> <p>world</p> </div>`,
            }

**具名插槽（slot name=" "）可以将父组件内容传递到指定插槽内部**

<child-com>
                <p slot="hello">hello</p>
                <p slot="world">world</p>
            </child-com>
            
    	var childCom = { 
                template:
                    `<div> <slot name="hello"></slot> <p>bey</p> <slot name="world"></slot> </div>`,
            }

**作用域插槽**

让（父组件）插槽 内容 能够访问 **子组件中**才有的 **数据** 是很有用的

## 动态组件与v-once指令 ##

**动态组件语法**（必须要 omponent 标签包裹）  
**currentTabComponent** 参数 的意思是，需要切换的组件名

可以点击 change 按钮 来回切换 childconone 组件 与 childcontwo 组件

<div id="root">
            <component :is="type"></component>
            
            <button @click="btnClick">change</button>
        </div>
    
    	var childconone = { 
                template:"<div>child-one</div>",
                data() { 
                    return { 
                    }
                },
            }
    
         var childcontwo = { 
                template:"<div>child-two</div>",
                data() { 
                    return { 
                    }
                },
            }
        
    	methods: { 
                    btnClick:function(){ 
                        this.type = this.type === "childconone" ? "childcontwo" : "childconone";
                    }
                },

**动态组件小demo，顺便一提 keep-alive 的使用** keep-alive 会保持这些组件的状态

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="vue.js"></script>
        <style>
            *{ 
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            .bord{ 
                border: 1px solid black;
            }
            .one{ 
                height: 65px;
                width: 300px;
                text-align: left;
            }
            .two{ 
                height: 20px;
                width: 300px;
                text-align: left;
            }
            .ulbtn{ 
                float: left;
                display: inline-block;
                border-right: 1px solid grey;
            }
            
        </style>
    </head>
    <body>
        <div id="root">
            <button @click="pageo">page1</button><button @click="paget">page2</button>
            <keep-alive>
                <component :is="type"></component>
            </keep-alive>
        </div>
    
        <script>
            var one = { 
                template:`<div class="bord one"> <ul class="ulbtn"> <li @click="lione">1-1</li> <li @click="litwo">1-2</li> <li @click="lithree">1-3</li> </ul> <div v-if="type === 'on'"> 默认页 </div> <div v-if="type === 'one'"> 第一页 </div> <div v-if="type === 'two'"> 第二页 </div> <div v-if="type === 'three'"> 第三页 </div> </div>`,
                data() { 
                    return { 
                        type:"on"
                    }
                },
                methods:{ 
                    lione:function(){ 
                        this.type = "one"
                    },
                    litwo:function(){ 
                        this.type = "two"
                    },
                    lithree:function(){ 
                        this.type = "three"
                    },
    
                }
            }
            var two = { 
                template:`<div class="bord two">page2</div>`,
            }
    
            Vue.component("one-one",{ 
                template:"",
                data() { 
                    return { 
                        
                    }
                },
            })
            var vm = new Vue({ 
                el:"#root",
                data() { 
                    return { 
                        type:"one",
                    }
                },
                components:{ 
                    one,
                    two
                },
                methods: { 
                    pageo:function(){ 
                        this.type = "one"
                    },
                    paget:function(){ 
                        this.type = "two"
                    }
                },
            })
        </script>
    </body>
    </html>

**v-once指令**  
写在根，id= “root”，的最外层的 div 上  
意思是，就算组件中的内容有所改变，我也不会改变，只会在加载的时候渲染一次  
即，外层 div上有 v-once ，其内部内容有所改变，也不会重新渲染内部