vue学习笔记day17 子组件和子组件之间的传值

最新推荐文章于 2024-08-12 16:45:40 发布

桑丘紫言

最新推荐文章于 2024-08-12 16:45:40 发布

阅读量516

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39209728/article/details/104579049

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一 vue的组件传值 （通讯）
a>父子组件通信
    props 父组件给子组件传值  子组件使用父组件数据
    1》在子组件props:[定义数据名称]
        子组件中使用 {{子组件props定义的数据名称}}
    2》<com :子组件名称="父组件数据名称"></com> 将父组件数据名称传给子组件中

    props是单向数据流
    双向数据
       在js中对象是引用类型
b》子组件和子组件通信  
    自定义事件
    如果子组件将数据传递给父组件或者 子组件将数据传递给子组件 需要使用自定义事件
    使用$on(eventName)监听事件
    使用$emit(eventName)触发事件

     1>组件一中methods:方法中编写Vm.$emit("自定义方法名",组件一中被传递数据)，当方法被触发后数据可以进行在自定义方法中存储
        $emit("自定义方法名",组件一中被传递数据)
     2>组件二中mounted挂载结束后，使用$on监听方法（组件一中自定义的方法名）获取方法中存储的数据
        $on("组件一中自定义的方法名",function(data){ //data为接收到的方法中存储的组件一中的数据})

    双向传递 同props中 变为对象的引用即可

例子1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{str}}</p>
        <child :msg="str"></child>


    </div>
    <template id="dv1">
        <h1 @click='run'>我是子组件--{{msg}}</h1>
    </template>
    <script src="../vue.js"></script>
    <script>
        new Vue({ //父组件
            el: "#app",
            components: {
                "child": {
                    props: ["msg"],
                    template: "#dv1",
                    data: function() {
                        return {

                        }
                    },
                    methods: {
                        run: function() {
                            this.msg = 123;
                        }
                    }
                },
            },
            data: {
                str: "这是父组件数据"
            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{obj.str}}</p>
        <child :msg="obj"></child>


    </div>
    <template id="dv1">
        <h1 @click='run'>我是子组件--{{msg.str}}</h1>
    </template>
    <script src="../vue.js"></script>
    <script>
        new Vue({ //父组件
            el: "#app",
            components: {
                "child": {
                    props: ["msg"],
                    template: "#dv1",
                    data: function() {
                        return {

                        }
                    },
                    methods: {
                        run: function() {
                            this.msg.str = 123;
                        }
                    }
                },
            },
            data: {
                obj: { //对象是引用类型  --->实现单向变双向
                    str: "这是父组件数据"
                }
            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子3

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <aaa></aaa>
        <bbb></bbb>

    </div>
    <template id="dv1">
        <h1 @click="run">我是a子组件---{{str1}}</h1>
    </template>
    <template id="dv2">
        <h1>我是b子组件----{{data}}</h1>
    </template>
    <script src="../vue.js"></script>
    <script>
        var Vm = new Vue();
        new Vue({ //父组件
            el: "#app",
            components: {
                "aaa": {

                    template: "#dv1",
                    data: function() {
                        return {
                            str1: "这是a数据",
                        }
                    },
                    methods: {
                        run: function() {
                            alert(1);
                            Vm.$emit("xxx", this.str1)
                        }
                    }
                },
                "bbb": {
                    data: function() {
                        return {
                            data: "",
                        }
                    },
                    template: "#dv2",
                    mounted: function() {
                        // alert(11111)
                        var _this = this;
                        Vm.$on("xxx", function(data) {
                            data = 3333;
                            _this.data = data

                            console.log(data)
                        })
                    }
                }
            },
            data: {

            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子4

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <aaa></aaa>
        <bbb></bbb>

    </div>
    <template id="dv1">
        <h1 @click="run">我是a子组件---{{obj.str1}}</h1>
    </template>
    <template id="dv2">
        <h1>我是b子组件----{{b.str1}}</h1>
    </template>
    <script src="../vue.js"></script>
    <script>
        var Vm = new Vue();
        new Vue({ //父组件
            el: "#app",
            components: {
                "aaa": {

                    template: "#dv1",
                    data: function() {
                        return {
                            obj: {
                                str1: "这是a数据"
                            }

                        }
                    },
                    methods: {
                        run: function() {
                            Vm.$emit("xxx", this.obj)
                        }
                    }
                },
                "bbb": {
                    data: function() {
                        return {
                            b: {},
                        }
                    },
                    template: "#dv2",
                    mounted: function() {
                        var _this = this;
                        Vm.$on("xxx", function(data) {
                            data.str1 = 3333;
                            _this.b = data

                            console.log(_this.b)
                        })
                    }
                }
            },
            data: {

            },
            methods: {

            }

        })
    </script>
</body>

</html>