成为Vue.js插槽和配置代理专家：轻松掌控父组件与子组件通信

前端

2023-03-19 13:50:19

Vue.js 插槽与配置代理：掌握组件间通信利器

插槽：灵活地插入 HTML 结构

在 Vue.js 中，插槽是一种强大的工具，允许父组件向子组件指定位置，以插入自定义 HTML 结构。这为创建动态且可复用的组件提供了极大的灵活性。

默认插槽： 最基本类型的插槽，允许在父组件内任何位置插入 HTML。

具名插槽： 通过指定名称，允许父组件将 HTML 插入子组件的特定命名插槽中。

作用域插槽： 提供一种方法，允许父组件在遍历数据时向子组件传递作用域数据，从而动态地渲染 HTML。

配置代理：跨组件访问数据和方法

配置代理允许父组件访问子组件的 data 和 methods。这使得跨组件的数据共享和方法调用成为可能，从而提高了代码的可维护性和复用性。

通过使用 ref 属性，父组件可以获取对子组件实例的引用，从而访问其 data 和 methods。

案例解析：插槽和代理的实际应用

案例 1： 父组件中使用插槽向子组件插入一个按钮，并通过配置代理调用子组件的方法。

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:button>
        <button @click="callChildMethod">按钮</button>
      </template>
    </child-component>
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <slot name="button"></slot>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      // 子组件方法
    }
  }
};
</script>

案例 2： 父组件中使用插槽向子组件插入一个列表，并通过配置代理循环访问子组件的数据。

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:item="{ item }">
        <li>{{ item.name }}</li>
      </template>
    </child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'item 1' },
        { name: 'item 2' },
      ]
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>

<script>
export default {
  props: ['item']
};
</script>