vue 组件父组件与子组件相互传递练习案例

最新推荐文章于 2024-04-22 14:32:11 发布

Drizzlejj

最新推荐文章于 2024-04-22 14:32:11 发布

阅读量432

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Drizzlejj/article/details/122238330

版权

简介：这个案例可以练习组件之间的相互通信传递。

1、如图

1.1 左侧是 filmitem 组件，右侧黄色部分是 film-detail 组件

1.2 点击请求左侧显示电影海报和电影名字以及详情按钮，点击详情部分，黄色部分显示对象的文字电影简介

2、如图

子组件从父组件获取数据，再传给父组件，父组件接受保存再传给另一个子组件。

3、上码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父传子，子传父案例</title>
    <script src="./vue.js"></script>
    <style>
        .item{
            overflow: hidden;
            padding: 10px;
            width: 400px;
            border: 1px solid red;
        }
        .item img{
            width: 100px;
            float: left;
        }
        .filminfo{
            width: 300px;
            min-height: 200px;
            background-color: yellow;
            position: fixed;
            right: 50px;
            top: 100px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 父组件请求得到所有的数据 -->
        <button @click = "handlereq()">请求</button>
        <!-- 遍历父组件所请求到的所有数据得到 items数据 传给子组件  :itemslist = "items" -->
        <!-- 父组件接收到子组件传递过来的 synopsis 要保存到 父组件的 data 中，因此触发事件 @myevent="handleEvent" -->
        <filmitem  v-for = "items in filmlist" :itemslist = "items" @myevent="handleEvent" :key="items.filmId"></filmitem>
        <!-- 父组件把 上一个子组件传递给自己的数据保存到 自己的 data 状态中之后再拿出来传递给子组件 :film-data="filmdata" -->
        <film-detail :film-data="filmdata"></film-detail>
    </div>
    <script>
        Vue.component("filmitem",{
            template:
                `
                    <div class="item">
                        <img :src="itemslist.poster">
                        {{itemslist.name}}
                        <div>
                            <button @click="handleClick">详情</button>
                        </div>
                    </div>
                `,
                // 接受父组件传递过来的 items
                props:["itemslist"],
                methods:{
                    // 该事件 把 items数据中的 synopsis 数据传给父组件
                    handleClick(){
                        this.$emit("myevent",this.itemslist.synopsis)
                    }
                }
        })
        Vue.component("filmDetail",{
            // 子组件接收 父组件传递过来的数据
            props:["filmData"],
            template:
                `
                    <div class="filminfo">
                        {{filmData}}
                    </div>
                `    
        })
        new Vue({
            el:'#box',
            data:{
                filmlist:[],
                filmdata:""
            },
            methods:{
                handlereq(){
                    fetch("./maizuo.json")
                    .then(res=>{
                        return res.json()
                    })
                    .then(res=> {
                        this.filmlist = res.data.films
                    })
                },
                // 把子组件传递过来的数据保存到 状态 data 中
                handleEvent(data){
                    this.filmdata = data
                }
            }
        })
    </script>
</body>
</html>

Drizzlejj

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue 组件父组件与子组件相互传递练习案例

简介：这个案例可以练习组件之间的相互通信传递。1、如图1.1 左侧是filmitem 组件，右侧黄色部分是film-detail 组件1.2 点击请求左侧显示电影海报和电影名字以及详情按钮，点击详情部分，黄色部分显示对象的文字电影简介2、如图子组件从父组件获取数据，再传给父组件，父组件接受保存再传给另一个子组件。3、上码<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫