父子组件传递参数/默认插槽/具名插槽

父子组件传递参数 

在 uni-app 中,自定义组件之间可以通过 props 和事件的方式进行参数传递。下面我将详细说明父子组件之间相互传递参数的方法:

  1. 父组件向子组件传递参数(使用 props):
    • 在子组件的 vue 文件中,通过 props 字段定义需要接收的参数。
    • 在父组件使用子组件的地方,通过绑定属性的方式将数据传递给子组件。

子组件示例代码(Child.vue):




 父组件示例代码(Parent.vue):



  1. 子组件向父组件传递参数(使用事件):
    • 在子组件中通过 $emit 方法触发一个自定义事件,并将需要传递的数据作为参数传入。
    • 在父组件中监听子组件触发的自定义事件,并在相应的方法中获取传递的参数。

子组件示例代码(Child.vue):



 父组件示例代码(Parent.vue):




 通过上述方法,父组件和子组件就可以相互传递参数。父组件通过 props 将数据传递给子组件,子组件通过事件将数据传递给父组件,实现了双向的参数传递。

默认插槽 

在 uni-app 中,插槽(slot)是一种用于在组件内部插入内容的机制。通过插槽,我们可以将外部传入的内容动态地插入到组件的指定位置。uni-app 支持两种类型的插槽:默认插槽和具名插槽。

  1. 默认插槽:

默认插槽是最基本的插槽类型,它允许在组件中插入任意内容。在组件的模板中使用 标签来表示默认插槽的位置。

组件示例代码(Child.vue):




 父组件示例代码(Parent.vue):

template>
  

这是插入到子组件的内容

 在上述示例中,我们在父组件中使用了 标签,并在其中插入了一个

标签。这个

标签就会被动态地插入到子组件的默认插槽位置。

 

具名插槽

具名插槽允许我们在组件中定义多个插槽,并可以根据需要将内容插入到指定的插槽中。在组件的模板中使用 标签来表示具名插槽的位置。

组件示例代码(Child.vue):

 




 父组件示例代码(Parent.vue):




 

在上述示例中,我们在子组件中定义了两个具名插槽:contentfooter。在父组件中,我们使用了