vue组件三大核心概念图文详解

下面我会详细讲解“vue组件三大核心概念图文详解”的完整攻略。

一、概述

在vue中，组件是构建用户界面的基本单位。本文将详细介绍vue组件三大核心概念：Props/Custom Event、Slot、和Dynamic Component。

二、Props/Custom Event

Props主要用于父组件向子组件传递数据，而Custom Event则主要用于子组件向父组件发送消息。

1. 在子组件中定义Props

在子组件中定义Props，可以通过props选项实现。例如：

<template>
  <div>{{ message }}</div>
</template>

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

2. 在父组件中传递Props

在父组件中，通过绑定Props的方式来传递数据。例如：

<template>
  <child-component message="Hello from parent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent }
}
</script>

3. 在子组件中触发Custom Event

在子组件中，通过$emit方法来触发Custom Event。例如：

<template>
  <button @click="$emit('send-message', 'Hello from child')">Send Message to Parent</button>
</template>

4. 在父组件中监听Custom Event

在父组件中，通过v-on或@来监听Custom Event。例如：

<template>
  <child-component @send-message="handleMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log(message) // 输出：Hello from child
    }
  }
}
</script>

三、Slot

在Vue中，Slot允许父组件向子组件插入内容。

1. 命名Slot

通过具名插槽(named slot)，可以让父组件向子组件中的特定位置插入内容。例如：

<template>
  <div>
    <h3>Header</h3>
    <slot name="content"></slot>
    <h3>Footer</h3>
  </div>
</template>

在父组件中，需要给插槽指定一个name，例如：

<template>
  <my-component>
    <template #content>
      <p>Content goes here</p>
    </template>
  </my-component>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent }
}
</script>

2. 作用域插槽

作用域插槽(scoped slot)允许向子组件传递一个具名插槽，同时还传递了一些数据，使得子组件可以根据这些数据进行渲染。例如：

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

在父组件中，我们可以使用作用域插槽向子组件传递数据。例如：

<template>
  <my-component>
    <template #item="props">
      <p>{{ props.item.name }}</p>
    </template>
  </my-component>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      items: [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Orange' }
      ]
    }
  }
}
</script>

四、Dynamic Component

动态组件允许我们动态地切换组件。例如：

<template>
  <div>
    <component :is="currentComponent"></component>

    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>