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

来源：互联网发布：布袋除尘器算法编辑：程序博客网时间：2024/05/28 20:19

代码如下：

<!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>

阅读全文

0 0