Vue子组件与父组件的相互传值：第四天_new vue({ })data传值-优快云博客

本文详细介绍了Vue中父组件向子组件以及子组件向父组件传递数据的方法。包括使用props进行父组件向子组件的数据传递，以及子组件通过$emit触发事件向父组件传值的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件向子组件传值

一般情况下我们将 vue看做是一个大的组件，俗称父组件，例如下面的vm我们就可以看做是一个父组件，而在vm里面定义了一个com1的子组件。

var vm = new Vue({
    el: "#app",
    data: {
        msg:"我是父组件data中的msg"
    },
    components: {
        "com1": {
            template: "<h1>这是子组件</h1>"
        }
    }
})

那么有的场景下这个父组件需要向子组件传值，例如将vm中的data中的数据传递给子组件com1中。

注意：子组件无法访问到父组件中的data和methods的，它不像methods中的方法那样直接通过this.msg来获取data中的值。

那么父组件中data的值传递给子组件使用呢？

解决方法：

既然你在vm这个父组件中定义了一个子组件com1，那么这个com1总需要使用吧！如下使用方法是不！

<div id="app">
    <!--在父组件引用子组件；父组件就是这个id为app的div,子组件自然就是这个com1了-->
    <com1></com1>
</div>

我们可以这样做：当组件引用子组件的时候，我们可以在子组件上自定义一个属性，通过v-bind绑定这个自定义属性，然后将属性的值传递给子组件；例如定义一个mymsg属性，然后用b-dind绑定父组件data中的msg

<div id="app">
    <!--在父组件引用子组件；父组件就是这个id为app的div,子组件自然就是这个com1了。这个mymsg所绑定的msg是父组件vm中data中的msg-->
    <com1 v-bind:mymsg="msg"></com1>
</div>

那子组件如何来使用这个mymsg这个自定义属性呢？

第一步：我们需要在子组件的props数组中定义一下这个mymsg

第二步：使用这个mymsg

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <!--在父组件引用子组件：父组件就是这个id为app的div,子组件自然就是这个com1了-->
    <div id="app">
        <!--父组件可以在引用子组件的时候，通过属性绑定v-bind 的形式将父组件data中的值传递给子组件-->
        <com1 v-bind:mymsg="msg"></com1>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "我是父组件data中的msg"
            },
            methods: {},
            components: {
                "com1": {
                    //注意：子组件的中data数据，并不是通过父组件传递过来的，而是子组件自己私有的，比如子组件通过Ajax请求回来的数据都可以放到data中
                    data: function () {
                        return {
                            msg:"我是子组件data中的msg"
                        }
                    },
                    //注意：子组件中props数组中的所有元素的值都是通过于父组件传递给子组件的
                    props: ['mymsg'],//把父组件传递过来的mymsg属性，先在props数组中定义一下，这样才能使用这个数据;
                    template: "<h1>这是子组件：{{msg}}---{{ mymsg }}</h1>",
                }
            }
        })
    </script>
</body>
</html>

或者

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <!--在父组件引用子组件：父组件就是这个id为app的div,子组件自然就是这个com1了-->
    <div id="app">
        <!--父组件可以在引用子组件的时候，通过属性绑定v-bind 的形式将父组件data中的值传递给子组件-->
        <com1 v-bind:mymsg="msg"></com1>
    </div>

    <template id="comapp">
        <div>
            <h1>这是子组件：{{msg}}---{{mymsg}}</h1> 
        </div>
    </template>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "我是父组件data中的msg"
            },
            methods: {},
            components: {
                "com1": {
                    //注意：子组件的中data数据，并不是通过父组件传递过来的，而是子组件自己私有的，比如子组件通过Ajax请求回来的数据都可以放到data中
                    data: function () {
                        return {
                            msg:"我是子组件data中的msg"
                        }
                    },
                    //注意：子组件中props数组中的所有元素的值都是通过于父组件传递给子组件的
                    props: ['mymsg'],//把父组件传递过来的mymsg属性，先在props数组中定义一下，这样才能使用这个数据;
                    template: "#comapp"
                }
            }
        })
    </script>
</body>
</html>

子组件向父组件传值（父组件向子组件传递方法）

父组件向子组件传递方法，其实就是子组件向父组件传值的过程：父组件向子组件传递一个方法，然后子自己调用父组件传递过来的方法，子组件可以在调用这个方法的时候传递参数，这个参数是子组件里的数据，调用父组件传递过来的方法，这个父组件里的方法就会收到子组件传递过来的参数，这就达到了子组件向父组件传值的目的

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <!--在父组件引用子组件：父组件就是这个id为app的div,子组件自然就是这个com1了-->
    <div id="app">
        <!--父组件可以在引用子组件的时候，通过属性绑定v-bind 的形式将父组件data中的值传递给子组件-->
        <com1 v-on:myfun="parentFun1"></com1>
        <com1 v-on:myfun="parentFun2"></com1>
    </div>

    <template id="comapp">
        <div>
            <input type="button" value="调用父组件中的parentFun1方法" v-on:click="myClick1" />
            <input type="button" value="调用父组件中的parentFun2方法" v-on:click="myClick2" />
        </div>
    </template>

    <script>
        var vm = new Vue({
            el: "#app",           
            methods: {
                parentFun1: function () {
                    alert("我是父组件中methods中的myfun方法")
                },
                parentFun2: function (name, age) {
                    alert("我是父组件中methods中的带参数的myfun方法" + "我的名字叫：" + name + " 年龄：" + age+"岁")
                }
            },
            components: {
                "com1": {
                    template: "#comapp",                   
                    methods: {
                        myClick1: function () {
                            this.$emit('myfun') //$.emit方法是用于触发 父组件传递过来的myfun方法的
                        },
                        myClick2: function () {
                            this.$emit('myfun','张三',25) //$.emit方法是用于触发 父组件传递过来的myfun方法的
                        }
                    }                   
                }
            }
        })
    </script>
</body>
</html>