vue 插槽及插槽作用域 slot slot-scope

最新推荐文章于 2024-12-09 10:45:58 发布

wangc_gogo

最新推荐文章于 2024-12-09 10:45:58 发布

阅读量464

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue js java spring

本文链接：https://blog.youkuaiyun.com/wangc_gogo/article/details/93871623

java 同时被 3 个专栏收录

82 篇文章

订阅专栏

spring

64 篇文章

订阅专栏

52 篇文章

订阅专栏

本文深入探讨了Vue中slot-scope的使用方法，解释了如何通过它实现父组件使用子组件数据的场景。通过具体代码示例，展示了slot-scope如何连接父组件与子组件的数据流，为Vue开发者提供了实用的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slot-scope 的意思通俗来讲就是使用父的标签，但是使用子的数据，具体看代码：

<body>
    <div id="app">
        <cpn>
            <template slot-scope="slots">  //slots  为子插槽的名字，即name属性
                <span>{{slots.data}}</span>
            </template>

        </cpn>
    </div>
    <template name="slots" id="inner">
        <div>
          <slot :data="categories">    //子组件的 数据
              <ul>
                  <li v-for="item in categories">{{item}}</li>
              </ul>
          </slot>
        </div>
    </template>
</body>
<script>
    const  cpn={
        template:"#inner",
        props:{
            number:Number
        },
        data(){
            return{
                categories:["hello","word"]  //数据来源  子组件
            }
        },
    }
    new Vue({
        el:"#app",
        data:{
            num:2
        },
        components:{
            cpn
        },
        methods:{
            numinput(value){
                value =parseInt(value)
                this.num=value;
                console.log(value)
            }
        }
    })
</script>