2020-11-19 Vue——插槽、动态组件、混入、自定义指令

插槽

普通插槽

插槽允许我们在调用子组件的时候为子组件传递模板

<div id="app">
        <test>
            <template>你好</template>
        </test>
    </div>
    <script>
        let test = {
    
            template:`
                <div>
                    <slot></slot>                    
                </div>
            `,
        }
        new Vue({
    
            el:'#app',
            components:{
    
                test
            },
            data:{
    
                msg:'hello'
            }
        })
    </script>

具名插槽

<div id="app">
        <test>
            <!-- 告诉模板，传递参数到哪一个插槽中，通过插槽的名字进行唯一的确认 -->
            <template v-slot:one>{
  {msg}}</template>
        </test>
        <test>
            <template v-slot:two>你好</template>
        </test>
    </div>
    <script>
        let test = {
    
            template: