vue组件传参和一些小知识点

2024-01-17 23:42:40

Vue 组件：构建复杂界面的基石

在 Vue 生态系统中，组件是构建复杂用户界面的核心要素。它们提供了模块化和可重用性的优势，使开发人员能够高效地创建和维护应用程序。本文将深入探讨 Vue 组件，包括组件传参、生命周期、父子组件通信、scoped 插槽，以及 el 和 vm 等关键概念。

组件传参

组件传参允许父组件向子组件传递数据，从而实现组件之间的通信。这通过 props 选项实现，这是一个对象，包含要传递给组件的属性名称和类型。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

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

在上述示例中，父组件通过 :message 属性传递 message 属性给子组件。子组件通过 props 选项接收 message 属性，并在模板中使用它。

组件生命周期

Vue 组件的生命周期包含一系列阶段，从组件创建到销毁。这些阶段被称为生命周期钩子，允许开发人员在组件的不同阶段执行特定的任务。

export default {
  created() {
    // 组件已创建，但尚未挂载到 DOM
  },
  mounted() {
    // 组件已挂载到 DOM
  },
  updated() {
    // 组件已更新
  },
  beforeDestroy() {
    // 组件即将销毁
  },
  destroyed() {
    // 组件已销毁
  }
}

父子组件通信

在 Vue 中，父子组件通信可以通过多种方式实现：

props： 如上所述，props 用于父组件向子组件传递数据。
**emit：** emit 方法用于子组件向父组件传递数据。
**parent：** parent 属性指向父组件的实例。
ref： ref 指令用于在父组件中获取子组件的实例。

scoped 插槽

scoped 插槽是 Vue 中的一种特殊插槽，它允许子组件访问父组件的局部数据和方法。

// 父组件
<template>
  <child-component>
    <template scope="{ message }">
      <p>{{ message }}</p>
    </template>
  </child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <slot></slot>
</template>

<script>
export default {
  functional: true,
  render(h, context) {
    return context.scopedSlots.default({
      message: context.props.message
    })
  }
}
</script>

在上述示例中，父组件通过 scoped 插槽将 message 属性传递给子组件。子组件使用 scoped 插槽来访问父组件的 message 属性。

el 和 vm

el： el 选项指定组件挂载到 DOM 的元素。
vm： vm 选项指定组件的实例。

// 父组件
<template>
  <div id="app">
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  el: '#app',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

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