vue插口

Posted 2020-11-22 jflalove

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于vue插口的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置