vue.js 组件传值-子组件向父组件传值

最新推荐文章于 2024-04-14 23:34:00 发布

webshitian

最新推荐文章于 2024-04-14 23:34:00 发布

阅读量245

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_42943107/article/details/102063791

版权

vue.js 专栏收录该内容

10 篇文章 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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--引用子组件-->
        <!--父组件向子组件传递方法，使用的是事件绑定机制；v-on，当我们自定义一个
        事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
        -->
        <com2 v-on:func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是 子组件</h1>
        </div>
    </template>
    <script>
        //定义了一个字面量类型的 组件模板对象
        var com2 = {
            //通过制定了一个Id，表示要去加载 这个制定Id的template元素中的内容，当作 组件的HTML组件

            template:'#tmpl'
        }

        //创建Vue实例，得到viewModel
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                //在父组件上定义一个show的方法
                show(){
                    console.log('调用了父组件身上的show方法')
                }
            },
            components:{
                
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
代码分析：

什么是事件绑定机制？
以func为例，因为v-on:func这种形式，func是通过v-on来修饰的，因此func是一个事件绑定的机制

以上例子如何把show方法传递给子组件com2使用。子组件com2可以通过v-on的事件绑定方法，获取父组件中的show方法，把父组件上的show方法传递给子组件，方法传递给子组件的时候，只能通过事件绑定的机制，去自定义一个事件属性func，把func传递给子组件com2内部，com2可以拿到一个方法，它的引用就是func。而func是从show中来的。show是在父组件中定义的。这就是父组件向子组件传递方法的方式。

子组件身上有一个func的方法。而show是一个表达式，这个表达式会把show当成变量名，去根实例上找，首先在data上找有没有show属性，如果没有就往methods里面找，找到了，就会把show方法的引用放到子组件身上的func方法上。（show()如果show是带小括号的，就是把show调用一下，把调用的结果传递给func。不带括号就是把方法原封不动交给func，去保存一份）

怎么调用@func呢？

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--引用子组件-->
        <!--父组件向子组件传递方法，使用的是事件绑定机制；v-on，当我们自定义一个
        事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
        -->
        <com2 v-on:func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是 子组件</h1>
            <input type="button" value="这是子组件中的按钮-点击它，触发 父组件传递过来的func方法" @click="myclick">
        </div>
    </template>
    <script>
        //定义了一个字面量类型的 组件模板对象
        var com2 = {
            //通过制定了一个Id，表示要去加载 这个制定Id的template元素中的内容，当作 组件的HTML组件

            template:'#tmpl',
            methods:{
                myclick(){
                    console.log("可以被触发")
                }
            }
        }

        //创建Vue实例，得到viewModel
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                //在父组件上定义一个show的方法
                show(){
                    console.log('调用了父组件身上的show方法')
                }
            },
            components:{
                com2
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
通过以上的代码，我们可以在子组件中定义一个按钮，并在子组件中定义一个methods属性，在属性里定义一个myclick方法，每当我们点击子组件的时候，都会触发myclick方法。
每当点击子组件中的这个按钮，都可以触发myclick这个方法。

给代码添加一个 $e m i t () 的方法。$ emit(),可以触发一下，父组件传过来的@func方法。

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--引用子组件-->
        <!--父组件向子组件传递方法，使用的是事件绑定机制；v-on，当我们自定义一个
        事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
        -->
        <com2 v-on:func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是 子组件</h1>
            <input type="button" value="这是子组件中的按钮-点击它，触发 父组件传递过来的func方法" @click="myclick">
        </div>
    </template>
    <script>
        //定义了一个字面量类型的 组件模板对象
        var com2 = {
            //通过制定了一个Id，表示要去加载 这个制定Id的template元素中的内容，当作 组件的HTML组件

            template:'#tmpl',
            methods:{
                myclick(){
                    //当点击子组件的按钮的时候，如何 拿到 父组件传递过来的func方法，并调用这个方法？
                    //this代表一个组件的实例
                    //emit 英文原意:是触发，调用，发射的意思
                    this.$emit('func')
                }
            }
        }

        //创建Vue实例，得到viewModel
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                //在父组件上定义一个show的方法
                show(){
                    console.log('调用了父组件身上的show方法')
                }
            },
            components:{
                com2
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
子组件按道理来说不能调用父组件，但是子组件通过这种事件的绑定机制，把属于父组件的show方法，通过func这个属性传递给我们的子组件com2，com2就可以通过this.$emit来触发传递过来的func方法。

我们可以给show方法传递一个参数data，这个data可以收到外部传过来的参数
this.$emit()从第二个参数开始都可以进行传参。

调用父组件中的方法，并向父组件传参。

在这里插入图片描述

这种方式可以变相的看成是子组件向父组件传值，父组件上的data里面的值”把子组件中的这个参数传给父组件的data”是从子组件上传递过来的。

给子组件data里面声明一个sonmsg的对象
把sonmsg传递给父组件vm，怎么传呢？？

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--引用子组件-->
        <!--父组件向子组件传递方法，使用的是事件绑定机制；v-on，当我们自定义一个
        事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
        -->
        <com2 v-on:func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是 子组件</h1>
            <input type="button" value="这是子组件中的按钮-点击它，触发 父组件传递过来的func方法" @click="myclick">
        </div>
    </template>
    <script>
        //定义了一个字面量类型的 组件模板对象
        var com2 = {
            //通过制定了一个Id，表示要去加载 这个制定Id的template元素中的内容，当作 组件的HTML组件

            template:'#tmpl',
            data(){
                return{
                    sonmsg:{name:'webshitian',profession:'打酱油'}
                }
            },
            methods:{
                myclick(){
                    //当点击子组件的按钮的时候，如何 拿到 父组件传递过来的func方法，并调用这个方法？
                    //this代表一个组件的实例
                    //emit 英文原意:是触发，调用，发射的意思
                    this.$emit('func',this.sonmsg)
                }
            }
        }

        //创建Vue实例，得到viewModel
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                //在父组件上定义一个show的方法
                show(data){
                    console.log(data)
                }
            },
            components:{
                com2
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
把一个对象原封不动的写到这个位置，只要触发父组件中的func方法，就相当于把msgson这个对象放到父组件show方法中的data参数中

我们可以在父组件自身里的data里面声明一个datamsg用来接收子组件传过来的数据。例子如下所示：

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--引用子组件-->
        <!--父组件向子组件传递方法，使用的是事件绑定机制；v-on，当我们自定义一个
        事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
        -->
        <com2 v-on:func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是 子组件</h1>
            <input type="button" value="这是子组件中的按钮-点击它，触发 父组件传递过来的func方法" @click="myclick">
        </div>
    </template>
    <script>
        //定义了一个字面量类型的 组件模板对象
        var com2 = {
            //通过制定了一个Id，表示要去加载 这个制定Id的template元素中的内容，当作 组件的HTML组件

            template:'#tmpl',
            data(){
                return{
                    sonmsg:{name:'webshitian',profession:'打酱油'}
                }
            },
            methods:{
                myclick(){
                    //当点击子组件的按钮的时候，如何 拿到 父组件传递过来的func方法，并调用这个方法？
                    //this代表一个组件的实例
                    //emit 英文原意:是触发，调用，发射的意思
                    this.$emit('func',this.sonmsg)
                }
            }
        }

        //创建Vue实例，得到viewModel
        var vm = new Vue({
            el:"#app",
            data:{
                datamsg:""
            },
            methods:{
                //在父组件上定义一个show的方法
                show(data){
                    // console.log(data)
                    this.datamsg = data;
                    console.log('输出父组件自身的data里的datamsg值为:',this.datamsg)
                }
            },
            components:{
                com2
            }
        })
    </script>
    </body>
</html>