vue学习（十五）作用域槽

最新推荐文章于 2024-09-29 21:57:27 发布

dream21st

最新推荐文章于 2024-09-29 21:57:27 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/qq_36305027/article/details/83758313

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue中使用作用域槽实现组件间的动态数据传递。通过具体代码示例，展示如何在父组件中使用<template slot-scope>来访问子组件的数据，并在子组件中使用<slot>标签来显示这些数据。

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

1，作用域槽需要使用template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <child>
            <template slot-scope="props">
                <h1>{{props.item}}</h1>
            </template>
        </child>
    </div>

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