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

vue组件插槽与编译作用域

时间:2020-02-04 20:44:00      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:属性   sde   rip   show   ons   实例   const   npm   作用域   

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app">
    <cpn>
        <!-- 插槽-插入 -->
        <!-- 注意,由于编译作用域的概念,这里是在#app的作用域,所以这里showIt使用的是app实例对象的属性 -->
        <span slot="center" v-show="showIt">
            你好
        </span>
    </cpn>
</div>


<template id="cpn">
    <div>
        <span>左边</span>
        <!-- slot:插槽   name="center"给插槽具名 -->
        <slot name="center">
            <!-- 插槽默认值 -->
            <span>中间</span>
        </slot>
        
        <span>右边</span>
    </div>

</template>
<script>    
    // 组件的插槽:
    //     组件的插槽也是为了让我们封装的组件更具扩展性
    //     让使用者可以决定组件内部的一些内容到底显示什么
    const app = new Vue({
        el: "#app",
        data: {
            message: 你好啊,
            showIt: 1
        },    
        /*注册组件*/
        components:{
            cpn: {
                template: #cpn,
            }
        },
    
    })

</script>
</body>
</html>

 

vue组件插槽与编译作用域

标签:属性   sde   rip   show   ons   实例   const   npm   作用域   

原文地址:https://www.cnblogs.com/cl94/p/12260748.html

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