vue插口

    vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块!

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
                    <h1>{{msg}}</h1>
                    <tn>
                        <!-- <div v-slot:heater>slot插槽位置</div> -->
                        <template v-slot:heater>
                            <h3>头部</h3>
                        </template>
                        <p>直接插入组件的内容</p>
                        <template v-slot:footer>
                            <h3>尾部内容</h3>
                        </template>
                    </tn>   
                    <tn></tn>          
    </div>
    <template id="cpn">
      
       <div>
           <button>anniu</button>
        <h3>下面是一个插槽</h3>
        <slot name="heater"></slot> 
        <section>
            内容主体部分
        </section>
        <slot name="footer"></slot>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello word '
            },
            components: {
                tn:{
                    template:'#cpn',
                    data(){
                        return {
                        }
                    },
                    methods: {
                       parent(){
                        console.log(this.$parent.msg);
                       }
                    }
                    
                }
            }
        })    
    </script>
</body>
</html>

 

      

posted @ 2019-11-19 12:01  konge!  阅读(233)  评论(0编辑  收藏  举报