045——VUE中组件之父组件使用scope定义子组件模板结构

weixin_34202952

于 2018-01-09 16:43:00 发布

阅读量182

点赞数

文章标签： javascript ViewUI

本文介绍如何在Vue中利用scope属性定义子组件的模板结构，并通过具体示例展示了如何传递数据并显示在子组件中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件之父组件使用scope定义子组件模板结构</title>
    <script src="vue.js"></script>
</head>

<body>

<div id="hdcms">
    <hd-list :data="news">
        <template scope="v">
            <li>
                <h1>{{v.field.title}}</h1>
            </li>
        </template>
    </hd-list>
</div>
<script typeof="text/x-template" id="hdList">
    <ul>
        <slot v-for="v in data" :field="v"></slot>
    </ul>
</script>
<script>
    var hdList = {
        template: "#hdList",
        props:['data']
    };
    new Vue({
        el: "#hdcms",
        components: {hdList},
        data:{
            news:[
                {title:'phpjava'},
                {title:"课程学习"}
            ]
        }
    });
</script>

</body>

</html>