Vue组件数据传递 props

最新推荐文章于 2024-09-07 20:55:37 发布

P-Moon

最新推荐文章于 2024-09-07 20:55:37 发布

阅读量319

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_44620468/article/details/108679812

版权

Vue学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件数据传递 props

需要写在html标签里

    <div id="list2">
        <head-text v-bind:message = "message"></head-text>
        <!-- v-for 指令可以绑定数组的数据来渲染一个项目列表 -->
        <item v-for="item in listData" v-bind:item="item" v-bind:key="item.id"></item>
    </div>

Vue.component('item', {
    props: ['item'],
    template: '<p>{{item.text}}</p>'
})
Vue.component('head-text', {
    props: ['message'],
    template: '<p>{{message}}</p>'
})
let list2 = new Vue({
    el: '#list2',
    data: {
        listData: [
            { text: "床前明月光", id: 1 },
            { text: "疑是地上霜", id: 2 },
            { text: "举头望明月", id: 3 },
            { text: "低头思故乡", id: 4 },
        ],
        message: "静夜思"
    }
})

使用组件渲染时

<div id="listA"></div>

Vue.component('list', {
    props: ['lD'],
    data: function () {
        return { data: this.lD }
    },
    render: function (h) {
        return <div>
            {this.data.map((item) => <li key={item.id}>{item.text}</li>)} // 使用map函数
        </div>
    }
})

new Vue({
    el: "#listA",
    data: function () {
        return {
            listData: [
                { text: "床前明月光", id: 1 },
                { text: "疑是地上霜", id: 2 },
                { text: "举头望明月", id: 3 },
                { text: "低头思故乡", id: 4 },
            ]
        }
    },
    render: function (h) {
        return (<div>
            <list lD={this.listData}></list>  //注意传参形式
        </div>)
    }
})