vue2 父传子 props传值

最新推荐文章于 2025-11-30 09:20:25 发布

原创最新推荐文章于 2025-11-30 09:20:25 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

该代码示例展示了如何在Vue.js中创建组件，使用数据绑定从父组件向子组件传递数据，以及如何在子组件中定义和触发自定义事件。同时，它演示了如何从API获取数据并渲染数组。通过在`<my-com>`组件中处理房间列表数据，实现动态渲染房间名称和图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id="myApp">
        <!-- 4.渲染数组 绑定之定义事件  -->
        <my-com  v-for="item,i in roomList" :room-data="item" :key="i"> </my-com>

        
    </div>
    <!-- 组件模板 -->
    <template id='myTem'>
        <div>
            <!-- 5.绑定完自定义事件渲染到子组件 -->
            <img :src="roomData.room_src" alt="">
            <h2>{{roomData.room_name}}</h2>
        </div>
    </template>
    <script>
        Vue.component('myCom', {
            template: '#myTem',
            // 3.设置一个自定义事件
            props:["roomData"],
            data() {
                return {
                    
                }
            }
        })
        new Vue({
            el: '#myApp',

            // 2.保存到一个空数组
            data: {
                roomList:[]
            },
            methods: {
              
            },
            // 1.获取数据
            created() {
                fetch("http://open.douyucdn.cn/api/RoomApi/live?page=").then(r=>r.json()).then(res=>{
                    console.log(res);
                    this.roomList=res.data;
                })
            },
        })
        //  注意为1
    </script>
</body>
</html>