solt插槽的使用

最新推荐文章于 2024-05-28 17:25:55 发布

LJ君

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量672

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45068048/article/details/113881990

版权

1.1插槽的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <con> <span slot="sol1">计算机</span></con>
</div>
<template id="tem">
  <div>
      <slot>软件工程</slot>
      <slot name="sol1">
          <h1>软件11</h1>
      </slot>
  </div>
</template>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const cn={
        template:'#tem',
    }
    const app=new Vue({
        el: "#app",
        data:{
        },
        methods:({

        }),
        components:{
           con:cn
        }
    })
</script>
</body>
</html>

总结：插槽是在模板中添加标签

<template id="tem">
  <div>
      <slot>软件工程</slot>
      <slot name="sol1">
          <h1>软件11</h1>
      </slot>
  </div>
</template>

引用模板时

<con> <span slot="sol1">计算机</span></con>

solt就是要替换的部分
2.插槽的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cp></cp>
    <cp>
    <template slot-scope="slot">
        <span  v-for="project1 in slot.data">{{project1}}</span>
    </template>
    </cp>
</div>
<template id="tem">
   <div>
      <slot  :data="projects">
          <ul>
          <li v-for="project in projects">{{project}}</li>
      </ul>
      </slot>
   </div>
</template>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
        },
        methods:({

        }),
        components:{
            cp:{
                template:'#tem',
                data(){
                    return{
                        projects:['java','php','c#']
                    }
                }
            }
        }
    })
</script>
</body>
</html>

总结：引用子组件的数据是 slot-scope=“slot” v-for=“project1 in slot.data”

 <cp>
    <template slot-scope="slot">
        <span  v-for="project1 in slot.data">{{project1}}</span>
    </template>
    </cp>

LJ君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
solt插槽的使用

1.1插槽的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <con> <span slot="sol1">计算机</span></con>&
复制链接

扫一扫