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

    父子组件传递参数 

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

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

    子组件示例代码（Child.vue）：

    1. <template>
    2.   <div>
    3.     <h2>{{ title }}h2>
    4.     <p>{{ content }}p>
    5.   div>
    6. template>
    7.  
    8. <script>
    9. export default {
    10.   props: {
    11.     title: {
    12.       type: String,
    13.       required: true
    14.     },
    15.     content: {
    16.       type: String,
    17.       default: ''
    18.     }
    19.   }
    20. }
    21. script>

     父组件示例代码（Parent.vue）：

    1. <template>
    2.   <div>
    3.     <child-component :title="title" :content="content">child-component>
    4.   div>
    5. template>
    6.  
    7. <script>
    8. import ChildComponent from '@/components/Child.vue';
    9.  
    10. export default {
    11.   components: {
    12.     ChildComponent
    13.   },
    14.   data() {
    15.     return {
    16.       title: '标题',
    17.       content: '内容'
    18.     }
    19.   }
    20. }
    21. script>

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

    子组件示例代码（Child.vue）：

    1. <template>
    2.   <button @click="handleClick">点击触发事件button>
    3. template>
    4.  
    5. <script>
    6. export default {
    7.   methods: {
    8.     handleClick() {
    9.       const data = '这是子组件传递的数据';
    10.       this.$emit('child-event', data);
    11.     }
    12.   }
    13. }
    14. script>

     父组件示例代码（Parent.vue）：

    1. <template>
    2.   <div>
    3.     <child-component @child-event="handleChildEvent">child-component>
    4.     <p>接收子组件传递参数：{{ childData }}p>
    5.   div>
    6. template>
    7.  
    8. <script>
    9. import ChildComponent from '@/components/Child.vue';
    10.  
    11. export default {
    12.   components: {
    13.     ChildComponent
    14.   },
    15.   data() {
    16.     return {
    17.       childData: ''
    18.     }
    19.   },
    20.   methods: {
    21.     handleChildEvent(data) {
    22.       this.childData = data;
    23.     }
    24.   }
    25. }
    26. script>

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

    默认插槽 

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

    1. 默认插槽：

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

    组件示例代码（Child.vue）：

    1. <template>
    2.   <div>
    3.     <h2>我是子组件h2>
    4.     <slot>slot>
    5.   div>
    6. template>
    7.  
    8. <script>
    9. export default {
    10. }
    11. script>

     父组件示例代码（Parent.vue）：

    1. template>
    2.   <div>
    3.     <child-component>
    4.       <p>这是插入到子组件的内容p>
    5.     child-component>
    6.   div>
    7. template>
    8.  
    9. <script>
    10. import ChildComponent from '@/components/Child.vue';
    11.  
    12. export default {
    13.   components: {
    14.     ChildComponent
    15.   }
    16. }
    17. script>

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

    标签。这个

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

    具名插槽

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

    组件示例代码（Child.vue）：

    1. <template>
    2.   <div>
    3.     <h2>我是子组件h2>
    4.     <slot name="content">slot>
    5.     <slot name="footer">slot>
    6.   div>
    7. template>
    8.  
    9. <script>
    10. export default {
    11. }
    12. script>

     父组件示例代码（Parent.vue）：

    1. <template>
    2.   <div>
    3.     <child-component>
    4.       <template v-slot:content>
    5.         <p>这是插入到内容插槽的内容p>
    6.       template>
    7.       <template v-slot:footer>
    8.         <button>提交button>
    9.       template>
    10.     child-component>
    11.   div>
    12. template>
    13.  
    14. <script>
    15. import ChildComponent from '@/components/Child.vue';
    16.  
    17. export default {
    18.   components: {
    19.     ChildComponent
    20.   }
    21. }
    22. script>

    在上述示例中，我们在子组件中定义了两个具名插槽：content 和 footer。在父组件中，我们使用了