vue组件父子组件之间传递数据

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件父子组件之间传递数据相关的知识，希望对你有一定的参考价值。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Vue.js"></script>
    <template id="tpl1">
        <h3>我是父组件  -->{{msg}}</h3>
        <bbb @child-data="get"></bbb>
    </template>
    <template id="tpl2">
        <input type="button" value="发送" @click="send()">
        <h4>我是子组件  -->{{msg2}}</h4>
    </template>
    <script>
        //子组件取父组件的数据
        window.onload = function () {
            new Vue({
                el:"#div",
                //局部小组件
                components:{
                    ‘aaa‘:{
                        data: function () {
                            return {
                                msg:‘我是父组件的数据‘
                            }
                        },
                        template:‘#tpl1‘,
                        methods: {
                          get: function (m) {
                              this.msg = m;
                          }
                        },
                        components:{
                            ‘bbb‘:{
                                data: function () {
                                    return {
                                        msg2: ‘我是子组件‘
                                    }
                                },
                                template:"#tpl2",
                                methods:  {
                                    send:function (){
                                        this.$emit(‘child-data‘,this.msg2);
                                    }
                                }
                            }

                        }
                    }
                }
            })
        }
    </script>
</head>
<body>

<div id="div">
    <aaa></aaa>
</div>
</body>
</html>

 

以上是关于vue组件父子组件之间传递数据的主要内容，如果未能解决你的问题，请参考以下文章

vue.js 组件之间传递数据

Vue2.0父子组件之间的双向数据绑定问题解决方案

12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

vue父子组件之间传值

vue.js学习笔记— 父子组件之间通信的第一种方式 props 和 $emit

vue父子组件之间的通信