vue学习笔记day16 子组件使用父组件数据

最新推荐文章于 2023-12-25 09:42:18 发布

桑丘紫言

最新推荐文章于 2023-12-25 09:42:18 发布

阅读量252

点赞数

分类专栏： vue

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

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

例子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">
        <com></com>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({ //父组件
            el: "#app",
            components: {
                "com": {
                    template: "<h1 @click='run'>我是子组件--{{str}}</h1>",
                    data: function() {
                        return {
                            str: "这是子组件数据",
                        }
                    },
                    methods: {
                        run: function() {
                            alert(222)
                        }
                    }
                },
            },
            data: {

            },
            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">
        {{parent}}
        <com :msg="parent"></com>
        <child :cl="parent"></child>

    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({ //父组件
            el: "#app",
            components: {
                "com": { //子组件
                    props: ["msg"],

                    data: function() {
                        return {
                            str: "这是子组件数据",

                        }
                    },
                    template: "<h1 @click='run'>我是子组件--{{str}}--{{msg}}</h1>",
                    methods: {
                        run: function() {
                            alert(222)
                        }
                    }
                },
                "child": { //练习 父组件传值到子组件
                    props: ["cl"],
                    template: "<h1 @click='run'>child组件---{{cl}}</h1>",
                    methods: {
                        run: function() {
                            // alert(this.cl)
                            this.cl = "你好 我改变数据了"
                        }
                    }
                }
            },
            data: {
                parent: "这是父组件"
            },
            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">
        {{parent}}
        <child :cl="parent"></child>
        <show :msg="parent"></show>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({ //父组件
            el: "#app",
            components: {

                "child": { //练习 父组件传值到子组件
                    props: ["cl"],
                    data: function() {
                        return {
                            str: "123",
                        }
                    },
                    template: "<h1 @click='run'>child组件---{{cl}}</h1>",
                    methods: {
                        run: function() {
                            // alert(this.cl)
                            this.cl = "你好 我改变数据了"
                        }
                    }
                },
                "show": {
                    props: ["msg"],
                    template: "<h1>第二个子组件---{{msg}}<h1>",
                }
            },
            data: {
                parent: "这是父组件"
            },
            methods: {

            }

        })
    </script>
</body>

</html>