zoukankan      html  css  js  c++  java
  • vue组件插槽与编译作用域

    <!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>
  • 相关阅读:
    angularIO 路由守卫
    vue-property-decorator用法
    windows mysql 忘记密码
    OSPF 做负载均衡
    NLB 部署网络负载平衡
    flexible.js 布局详解
    python setup.py 构建
    python Zope.interface安装使用
    lnmp菜单
    linux下的文件删除原理
  • 原文地址:https://www.cnblogs.com/cl94/p/12260748.html
Copyright © 2011-2022 走看看