Vue前端开发之父组件向子组件传参

Vue 框架中的核心是组件，在页面视图中，大部分的功能和效果都是通过组件来完成的，为了便于功能的复用，又会提取出公共组件;当一个组件去调用公共组件时，它就是父组件，而此时的公共组件就是子组件，那它们是如何传参的呢?接下来进行详细介绍。

父向子组件传参说明

在Vue 中，如果父组件向子组件传递数据，可以借助子组件的属性(prop)，携带父组件传入的数据;如果子组件向父组件传递数据，则可以借助子组件的自定义事件(event)向父组件发送子组件的数据，因此父子间相互传递数据的示意图如下图7-1所示。

父向子组件传参实例
为了更好地说明父向子组件传参的过程，接下来通过一个完整的实例来进行演示。

实例7-1 父向子组件传参

1. 功能描述

分别新建两个组件，一个名称为Parent，另一个为Child，前者调用后者，形成父子组件关系;在Parent组件中添加一个文本输入框元素，并双向绑定一个变量，当在文本框中输入值时，改变变量的值，并将该值传入Child组件并显示在该组件的视图元素中。

2. 实现代码

在项目的components 文件夹中，添加一个名为“Parent”的.vue文件，该文件的保存路径是“components/ch7/part1/”，在文件中加入如清单7-1所示代码。

代码清单7-1 Parent.vue代码

<template>
    <div class="iframe">
        <span>父组件：</span>
        <input v-model="name" placeholder="请输入用户名"