父子组件

Posted 2023-04-06

参考技术A 1.什么是父子组件?

在一个组件中又定义了其它组件就是父子组件，其实局部组件就是最简单的父子组件, 因为可以把Vue实例看做是一个大组件，我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件

2.如何定义其它的父子组件

前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components，所以我们也可以在自定义组件中再定义其它组件

综上所述：如果以后想要使用父子组件，只需要在父组件中通过components再定义一个子组件，并且记住，子组件只能在定义它的父组件中使用。

1、父子组件数据传递?

在Vue中子组件是不能访问父组件的数据的,

如果子组件想要访问父组件的数据, 必须通过父组件传递

2、如何传递数据

    2.1在父组件中通过v-bind传递数据

          传递格式 v-bind:自定义接收名称 = "要传递数据"

    2.2在子组件中通过props接收数据

          接收格式 props: ["自定义接收名称"]

1.父子组件方法传递?

在Vue中子组件是不能访问父组件的方法的,如果子组件想要访问父组件的方法, 必须通过父组件传递

2.如何传递方法

    2.1在父组件中通过v-on传递方法

      传递格式 v-on:自定义接收名称 = "要传递方法"

    2.2在子组件中自定义一个方法

    2.3在自定义方法中通过 this.$emit('自定义接收名称');触发传递过来的方法

注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收

            如果传递的是方法, 那么需要在子组件中自定义一个方法

            如果传递的是方法, 那么在子组件中直接使用自定义的方法即可

            如果传递的是方法, 那么需要在子组件自定义的方法中通过        this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法

流程：点击子组件按钮的时候，会执行子组件定义的方法，然后通过this.$emit触发了父组件传过来的parentsay；然后parentsay对应的就是父组件绑定的say方法，因此实现了父组件的方法实现传递。

3、如何将子组件数据传递给父组件

既然我们可以将父组件的方法传递给子组件，可以在子组件中调用父组件中的方法,那么我们就可以在调用方法的时候给方法传递参数，传递的参数, 就是我们需要传递的数据。

1、组件中的命名注意点

1.1注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"

例如: 注册时: myFather  ->  使用时: my-father

1.2在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"

例如: 传递时: parent-name="name" ->  接收时: props: ["parentName"]

1.3在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"

@parent-say="say"  -> this.$emit("parent-say");

Vue3---父子组件间互相传值

参考技术A Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context（组件上下文）中的emit。

例1：Tab菜单子组件
创建子组件Tabs.vue

父组件