区分父组件、子组件

发布时间：2023-04-24 14:13:48 所属栏目：教程来源：

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

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

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

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

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

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

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

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

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

父组件添加 data 变量

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

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

使用 login 组件的时候传递值

继续修改 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 传递给父组件。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!