深入理解VUE组件-蒲公英云

组件参数校验（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 参数的意思是，需要切换的组件名

<component v-bind:is="currentTabComponent"></component>

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

<div id="root">
        <component :is="type"></component>
        <!-- <childconone v-if="type === 'one'"></childconone>
        <childcontwo v-if="type === 'two'"></childcontwo> -->
        <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>