父组件、子组件传值

1. 前言

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

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

2. 区分父组件、子组件

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

比如某个页面组件A引入一个自定义组件B,其中这个页面组件A就是父组件,引入的这个自定义组件B就是子组件。

如果这个自定义组件B中还引入了另外一个自定义组件C,那么自定义组件B就是自定义组件C的父组件,自定义组件C就是自定义组件B的子组件。

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

上一小节我们创建了一个自定义登录弹窗组件 login.vue,并在首页 index.vue 文件中引用了这个组件。其中index.vue 就是父组件,而被引用的登录弹窗组件 login.vue 就是子组件。

3. 父组件向子组件传值

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

大致的思路就是:在父组件中随便定义一个 data 变量,然后在组件标签中传递这个变量给子组件,最后在子组件中通过 props 方法来接受父组件传递过来的值。我们来继续修改上一小节的代码。

3.1 父组件添加 data 变量

在 pages/index/index.vue 文件中的添加一个 data 变量。
实例:

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

3.2 使用 login 组件的时候传递值

继续修改 pages/index/index.vue 文件,在使用组件时,添加我们要传递的值。
实例:

<!-- 原代码 -->
<Login></Login>

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

3.3 在子组件中接收值

这次来修改 components/login/login.vue 文件,使用 props 来接受父组件传递过来的值。
实例:

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

3.4 页面显示值

继续编辑 components/login/login.vue 文件,在 template 页面代码中显示 text 值。
实例:

<!-- 原代码 -->
<p>慕课网wiki</p>

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

3.5 查看效果

点击工具栏–运行–运行到内置浏览器,会出现以下效果:

4. 子组件向父组件传值

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

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

4.1 在父组件中添加控制弹窗显示的变量

编辑 pages/index/index.vue 文件。

4.1.1 在 data 中添加 isShow 变量

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

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

4.1.2 v-if 控制组件显示

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

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

4.2 在子组件中通过 $emit 触发事件向父组件传值

编辑 components/login/login.vue 文件。

4.2.1 给授权登录按钮添加一个点击事件

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

4.2.2 创建点击事件,并向父组件传值

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

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

4.3 父组件接收参数

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

4.3.1 指定接收事件

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

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

4.3.2 自定义事件并打印参数

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

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

4.4 查看效果

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

从子组件传递过来的值 false

5. 小结

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

  • 掌握父组件向子组件传递参数的流程,在父组件中使用组件的时候传递值,并在子组件中用props接收值;
  • 掌握子组件向父组件传递参数的流程,比较复杂,建议跟着课程敲写代码,加深一下理解。