作用域插槽列表的简单应用实例

最新推荐文章于 2024-07-26 13:02:41 发布

有一个王小森

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量3.6k

点赞数

分类专栏： vue.js 文章标签：作用域插槽 vue-js

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/76087662

版权

vue.js 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <!--注意 vue.js的路径、-->
</head>
<body>

<div id="app">
<child :items="items">
    <template slot="item" scope="props">
        <!--必须存在的具有 scope属性的 template元素（作用域插槽的模板），
        props临时的变量名称，接受子组件中传递的props对象-->
        <!--slot = “item”是具名 slot的用法。-->
        <li>
            {{props.tex}}
            <!--引用子组件中绑定的tex属性值。-->
        </li>
    </template>
</child>
</div>


<script>
    Vue.component('child',{
        props:["items"],
        template:'<ul><slot name="item" v-for="item in items" v-bind:tex="item.text"></slot></ul>'
    });

new Vue({
    el:'#app',
    data:{
        items:[
            {text:'实例1'},
            {text:'实例2'},
            {text:'实例3'},
            {text:'实例4'},
            {text:'实例5'},
            {text:'实例6'}
        ]
    }
})
</script>
</body>
</html>

渲染输出的结果是：

<div id="app">
    <ul>
        <li>实例1</li>
        <li>实例2</li>
        <li>实例3</li>
        <li>实例4</li>
        <li>实例5</li>
        <li>实例6</li>
    </ul>
 </div>