vue组建中子组件向父组件中传递值

子组件向父组件传值相对来说繁琐，子组件中需要在方法中使用$emit向父组件自定义事件对应的方法传值，父组件需要在自定义对应的方法中接收子组件传来的值

$emit接收两个参数：

参数1：父组件自定义事件

参数2：要传递的值

用伪代码表示一下流程如下：

子组件中

data中：

info:'子组件内容'

template中：

<button v-on:click="Pass"></button>

methods中：

Pass:function(){

this.$emit('parent_event', this.info)

}

父组件中

data中

msg:''

template中

<p>{{msg}}</p>

<子组件 v-on:parent_event="Receive" />

methods中：

Receve:function(val){

this.msg = val

}

整体实例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="panel panel-default" id="app">
                <div class="panel-heading">
                    <div class="panel-title">APP父组件</div>
                </div>
                <div class="panel-body">
                    <blockquote class="blockquote-reverse">
                        <p>父组件接收子组件传来的值</p>
                        <footer>
                            子组件发来的信息：<span class="bg-danger">{{son_info}}</span></footer>
                    </blockquote>
                    <div class="row">
                        <div class="col-lg-4">
                            <!--使用parent_change事件接收子组件传来的值，并传递给ChangeObj方法-->
                            <Com1 @parent_change="ChangeObj"></Com1>
                        </div>
                        <div class="col-lg-4">
                            <!--使用parent_change事件接收子组件传来的值，并传递给ChangeObj方法-->
                            <Com2 @parent_change="ChangeObj"></Com2>
                        </div>
                        <div class="col-lg-4">
                            <!--使用parent_change事件接收子组件传来的值，并传递给ChangeObj方法-->
                            <Gcom @parent_change="ChangeObj"></Gcom>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    // 定义一个全局子组件
    Vue.component('Gcom', {
        data:function () {
            return {
                gcom_blog:{
                    id:8,
                    title:'Gcom中的博客标题'
                },
                gcom_info:'Gcom组建中的信息'
            }
        },
        template:`
        <div class="panel panel-danger">
                <div class="panel-heading">
                    <div class="panel-title">Gcom全局子组件</div>
                </div>
                <div class="panel-body">
                {{gcom_blog.id}}——{{gcom_blog.title}}
                <button class="btn btn-danger" v-on:click="SonPass">Gcom向父组件传值</button>
                </div>
        </div>
        `,
        methods:{
            SonPass:function () {
                // 向parent_change事件传递值
                this.$emit('parent_change', this.gcom_info)
            }
        }
    })

    //定义一个局部组件com1
    let Com1={
        data:function () {
            return {
                com1_info:'Com1组件信息'
            }
        },
        template:`
        <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Com1子组件</div>
                </div>
                <div class="panel-body">
                {{com1_info}}<br>
                <button class="btn btn-primary" v-on:click="SonPass">Com1向父组件传值</button>
                </div>
        </div>
        `,
        methods:{
            SonPass:function () {
                // 向parent_change事件传递值
                this.$emit('parent_change', this.com1_info)
            }
        }
    }

    //定义一个局部组件com2
    let Com2={
        data:function () {
            return {
                com2_info:'Com2组件信息'
            }
        },
        template:`
        <div class="panel panel-warning">
                <div class="panel-heading">
                    <div class="panel-title">Com2子组件</div>
                </div>
                <div class="panel-body">
                {{com2_info}}<br>
                <button class="btn btn-warning" v-on:click="SonPass">Com2向父组件传值</button>
                </div>
        </div>
        `,
        methods:{
            SonPass:function () {
                // 向parent_change事件传递值
                this.$emit('parent_change', this.com2_info)
            }
        }
    }

    // 父组件app
    new Vue({
        el:'#app',
        data:function () {
            return {
                app_user:{
                    name:'孙悟空',
                    age:529
                },
                // 用来接收子组件传来的值
                son_info:''
            }
        },
        // 挂载子组件、全局组件不用挂载
        components:{
            Com1,
            Com2
        },
        methods:{
            // 该事件接收子组件传来的值
            ChangeObj:function (val) {
                this.son_info=val
            }
        }
    });

</script>
</body>
</html>

效果图如下

image.png

最后编辑于：2019.06.28 11:29:14