在前面小节中，我们学习了系统预设组件的使用、组件的创建与使用，日常开发过程中，经常会有组件之间互相传值的需求。这一小节我们来了解一下如何在组件与组件之间传值。

为了方便描述，我们将组件分为了父组件与子组件，那如何区分哪个是父组件，哪个是子组件呢？

父组件、子组件是一对相对的名词，只是为了来更方便的区分组件，组件既可以是父组件，也可以是子组件。

比如某个组件A引入组件B，其中这个组件A就是父组件，引入的这个组件B就是子组件。

如果这个组件B中还引入了另外组件C，那么组件B就是组件C的父组件，组件C就是组件B的子组件。

可能不太好理解，下面我们来举个实际开发中的例子。

上一小节我们创建了弹窗组件 login.vue，并在 index.vue 中引用了这个组件。其中index.vue 就是父组件，而被引用的弹窗组件 login.vue 就是子组件。

如果想要将父组件的变量在子组件上面，就需要父组件 index.vue 向子组件 login.vue 传值，来控制弹窗的，接下里我们来看看具体怎样操作。

大致的思路就是：在父组件中随便定义 data 变量，然后在组件中传递这个变量给子组件，最后在子组件中通过 props 来接受父组件传递过来的值。我们来继续上一小节的。

在 pages/index/index.vue 中的 data 变量。
实例：

data() {
    return {
        text:"我是父组件的值"
    };
}

继续 pages/index/index.vue ，在使用组件时，我们要传递的值。
实例：

<!-- 原 -->
<Login></Login>

<!-- 后 -->
<Login :text="text"></Login>

这次来 components/login/login.vue ，使用 props 来接受父组件传递过来的值。
实例：

<script>
    export default {
        props:['text']
    }
</script>

继续编辑 components/login/login.vue ，在 template 中 text 值。
实例：

<!-- 原 -->
<p>网wiki</p>

<!-- 后 -->
<p>{{text}}</p>

点击工具栏–运行–运行到内置浏览器，会出现以下：

在前面的课程中，我们只是实现了在中弹窗组件，但是点击按钮弹窗并不会被隐藏，这样一般不符合实际需求。

如果想要点击授权按钮后，隐藏弹框这个组件。这就需要通过 $emit 触发事件进行参数的传递。将代表子组件中授权按钮状态的变量 isShow 传递给父组件。

编辑 pages/index/index.vue 。

我们定义 isShow 变量，代表子组件中授权按钮状态，当 isShow 为 true 时，弹窗组件，当isShow 为 false 时，隐藏弹窗组件。

data() {
    return {
        text:"我是父组件的值",
        isShow:true
    };
}

<!-- 原 -->
<Login :text="text"></Login>

<!-- 后 -->
<Login v-if="isShow" :text="text"></Login>

编辑 components/login/login.vue 。

<button @click="sendMsg">授权</button>

当点击授权按钮后，触发 sendMsg() 事件，像父组件传递isShow对象，以及参数false。如果想要传递多个参数，后面跟数组就可以了。

methods:{
    sendMsg () {
        this.$emit('isShow',false)
        //传递多个参数
        //this.$emit('isShow',[false,"你好"])
    }
}

回到父组件，编辑 pages/index/index.vue 。

在 Login 上面接收从子组件传递过来的事件 isShow，不要忘记 isShow 前面有@符号。并指定接收事件为 getShow。

<Login v-if="isShow" :text="text" @isShow="getShow"></Login>

下面我们会继续创建 getShow 事件，打印出从子组件传递过来的参数，并将isShow 变量赋值为子组件传过来的 false 值。

methods:{
    getShow(res){
        console.log("从子组件传递过来的值",res)
        this.isShow = res
    }
}

点击工具栏–运行–运行到内置浏览器，点击授权按钮后，弹窗会被隐藏，并且终端会打印信息：

从子组件传递过来的值 false

本节课程我们主要学习了父组件和子组件之参数传递，本节课程的重点如下：