vue学习（十五）作用域槽

一时失言乱红尘 2022-04-18 00:18 145阅读 0赞

1，作用域槽需要使用template

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;child&gt;
            &lt;template slot-scope="props"&gt;
                &lt;h1&gt;{
       {props.item}}&lt;/h1&gt;
            &lt;/template&gt;
        &lt;/child&gt;
    &lt;/div&gt;

&lt;script&gt;
        Vue.component('child',{
            data:function () {
                return {
                    list:[1,2,3,4]
                }
            },
            template:'&lt;div&gt;' +
            '' +
            '&lt;slot v-for="item of list" :item="item"&gt;&lt;/slot&gt;' +
            '' +
            '&lt;/div&gt;'
        })
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue'
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue插槽、具名插槽和作用域插槽

槽使用场景是；如果子组件需要显示的内容并非来自本身，而是父组件传递进来的，而假如直接按下面这样写，是不可以实现的，因为如果me-component没有包含一个 `<slo...

不念不忘少年蓝@/ 2024年04月17日 16:00/ 0 赞/ 89 阅读

相关 Vue插槽---默认插槽、具名插槽、作用域插槽

目录总结 1.默认插槽 2.具名插槽 3.作用域插槽一、不使用插槽的效果 App.vue Category.vue 二、默认插槽 App.vue

浅浅的花香味﹌/ 2024年04月06日 10:08/ 0 赞/ 104 阅读

相关 Vue作用域插槽的使用

关于vue插槽，也用过很多次了，但是关于作用域插槽的用法，有些模糊，查了很多文档，自己理解记忆。在[官网上][Link 1]说： ![在这里插入图片描述][202001

ゝ一世哀愁。/ 2023年06月28日 14:28/ 0 赞/ 124 阅读

相关 Vue table及作用域插槽

示例代码： <template> <div> <el-table :data="tableData" style="width: 100%

浅浅的花香味﹌/ 2022年12月23日 06:43/ 0 赞/ 229 阅读

相关 Vue中的插槽和作用域插槽

重点：作用域插槽。如果需要用一句话去总结`作用域插槽`，那就是`在父组件中访问子组件的数据`，或者从`数据流向`的角度来讲就是`将子组件的数据传递到父组件`

我会带着你远行/ 2022年12月16日 09:03/ 0 赞/ 236 阅读

相关作用域插槽

当我们希望数据由子组件提供，页面结构由父组件提供，这种情况下我们可以作用域插槽。 v-slot 子组件中有数据，但是需要在父组件中控制页面结构子组件： <

青旅半醒/ 2022年11月30日 15:40/ 0 赞/ 214 阅读

相关 vue的作用域插槽

vue中的插槽，他的作用域有了解过吗~~~~知道你没有，跟我来了解了解插槽的作用区域，顾名思义就是这个插槽使用像js的作用域一样，有一定的作用范围，比如子组件在插槽中已经定

骑猪看日落/ 2022年10月27日 01:34/ 0 赞/ 214 阅读

相关 Vue 作用域插槽

Vue 作用域插槽 : [Vue 作用域插槽 - 简书][Vue _ -] 深入理解vue中的slot与slot-scope 写在前面 vue中关于插槽的文档

冷不防/ 2022年09月17日 06:14/ 0 赞/ 240 阅读

相关 vue学习（十五）作用域槽

1，作用域槽需要使用template <table> <tbody> <tr> <td> <pre><code><!DOCTYPE html>

一时失言乱红尘/ 2022年04月18日 00:18/ 0 赞/ 146 阅读

相关 Vue 作用域插槽

原博出处：作者：SentMes 链接：[SentMes作者书写的作用于插槽链接][SentMes] https://www.jianshu.com/p/0c95

╰+哭是因爲堅強的太久メ/ 2021年07月24日 12:22/ 0 赞/ 490 阅读