vuejs子组件向父组件传递数据

Posted 2020-09-06 wmui

tags:

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

子组件通过$emit方法向父组件发送数据，子组件在父组件的模板中，通过自定义事件接收到数据，并通过自定义函数操作数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <!-- 子组件向父组件传递数据 -->
    <div id="box">
        <v-parent></v-parent>
    </div>

    <!-- 父组件模板 -->
    <template id="parent">
        <div>
            <span>{{msgParent}}</span>
            <v-child @child-info="get"></v-child>
        </div>
    </template>

    <!-- 子组件模板 -->
    <template id="child">
        <div>
            <button @click="send">send</button>
            <!-- <p>{{msgChild}}</p> -->
        </div>
    </template>
    <script type="text/javascript">
        var app = new Vue({
            el:‘#box‘,
            components:{
                // 父组件
                ‘v-parent‘:{    
                    data() {
                        return {
                            msgParent:‘hello‘
                        }
                    },
                    template:‘#parent‘,
                    methods:{
                        get(msg){
                            this.msgParent = msg 
                        }
                    },
                    // 子组件
                    components:{
                        ‘v-child‘:{            
                            data(){
                                return {
                                    msgChild:‘child‘
                                }
                            },
                            template:‘#child‘,
                            methods:{
                                send(){
                                    this.$emit(‘child-info‘,this.msgChild)
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

此时点击子组件模板中的按钮，父模板中的子组件会接受到数据

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

VueJS组件通讯

Vuejs将动态数据从父组件传递给子组件

Vue.js中子组件向父组件传递信息。

vue组件-子组件向父组件传递数据-自定义事件

Vue子组件向父组件传递数据

vue 实现，子组件向父组件传递数据