码迷,mamicode.com
首页 > 其他好文 > 详细

vue插口

时间:2019-11-19 13:47:19      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:component   ons   device   console   footer   width   col   charset   doc   

    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>

 

      

vue插口

标签:component   ons   device   console   footer   width   col   charset   doc   

原文地址:https://www.cnblogs.com/jflalove/p/11888457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!