26vue学习_组件高级slot的使用（基本使用和具名插槽）

最新推荐文章于 2022-02-27 18:12:23 发布

chencaw

最新推荐文章于 2022-02-27 18:12:23 发布

阅读量451

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113746358

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1、slot的基本使用

（1）slot的使用，抽取共性，保留不同

（2）slot可以设置默认值

（3）如果有多个值放入slot中，会同时替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <!-- <cpn><button>按钮</button></cpn>    -->
        <cpn></cpn>
        <cpn><span>这是span内容</span></cpn>   
        <cpn><i>这是i的内容</i></cpn>   
        <cpn></cpn>
        <!-- <cpn><button>按钮</button></cpn>    -->
    </div>
    <!-- slot的使用，抽取共性，保留不同 -->
    <template id="cpn">
        <div>
           <h2>我是组件</h2>
           <p>我是组件内容</p>
           <!-- 1以下slot的正常用法 -->
           <!-- <slot></slot> -->
           <!-- 2.以下是有默认值的用法 -->
           <slot><button>按钮</button></slot>
        </div>            
    </template>
  
    <script src="../js/vue.js"></script>
    <script>
      
        //1、2父组件中直接创建子组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '你好啊'
            },
            components:{
                cpn:{
                    template: '#cpn',
                    data(){
                        return{
                            name: '我是cpn组件的name'
                        }
                    }           
                }
            }     
        })
    </script>
</body>

2、slot的使用，具名插槽

关键：

（1）定义的时候<slot name=‘xxx’>

使用的时候<span slot='xxx'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <cpn><span slot='center'>搜索内容</span></cpn>
        <cpn><button slot='left'>返回</button</cpn>
    </div>
    <!-- slot的使用，抽取共性，保留不同 -->
    <template id="cpn">
        <div>
           <slot name='left'><span>左边的</span></slot>
           <slot name='center'><span>中间的</span></slot>
           <slot name='right'><span>右边的</span></slot>
        </div>            
    </template>
  
    <script src="../js/vue.js"></script>
    <script>
      
        //1、2父组件中直接创建子组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '你好啊'
            },
            components:{
                cpn:{
                    template: '#cpn',        
                }
            }     
        })
    </script>
</body>

chencaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
26vue学习_组件高级slot的使用（基本使用和具名插槽）

1、slot的基本使用（1）slot的使用，抽取共性，保留不同（2）slot可以设置默认值（3）如果有多个值放入slot中，会同时替换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父组
复制链接

扫一扫