Vue-组件高级(下）

**Vue 组件高级（下）**

在上一篇文章中，我们已经介绍了 Vue 组件的基本概念、生命周期函数以及常见的事件处理。今天我们将继续讨论一些更高级的主题，包括：

* **组件通信**
* **组件懒加载**
* **组件动画**
* **组件自定义**

### 一、组件通信在 Vue 中，组件之间可以通过各种方式进行通信。下面我们将介绍几种常见的方法：

####1. propsprops 是一种简单而有效的方式来传递数据从父组件到子组件。

javascript// 父组件<template>
 <div>
 <child-component :name="name" />
 </div>
</template>

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

export default {
 components: { ChildComponent },
 data() {
 return {
 name: 'Vue'
 }
 }
}
</script>

javascript// 子组件<template>
 <div>
 {{ name }}
 </div>
</template>

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

javascript// 子组件<template>
 <div @click="handleClick">点击我</div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$emit('my-event')
 }
 }
}
</script>

javascript// 父组件<template>
 <div>
 <child-component @my-event="handleMyEvent" />
 </div>
</template>

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

export default {
 components: { ChildComponent },
 methods: {
 handleMyEvent() {
 console.log('收到事件')
 }
 }
}
</script>

javascript// 子组件<template>
 <div>
 {{ $parent.name }}
 </div>
</template>

<script>
export default {
 computed: {
 name() {
 return this.$parent.name }
 }
}
</script>

javascript// 懒加载组件<template>
 <div v-if="isLoaded">
 <!-- 内容 -->
 </div>
</template>

<script>
export default {
 data() {
 return {
 isLoaded: false }
 },
 mounted() {
 this.isLoaded = true }
}
</script>

javascript// 动画组件<template>
 <div v-if="isLoaded" transition="fade">
 <!-- 内容 -->
 </div>
</template>

<script>
export default {
 data() {
 return {
 isLoaded: false }
 },
 mounted() {
 this.isLoaded = true }
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
 transition: opacity0.5s;
}

.fade-enter,
.fade-leave-to {
 opacity:0;
}
</style>

javascript// 自定义组件<template>
 <div>
 <!-- 内容 -->
 <slot name="header" />
 <slot name="footer" />
 </div>
</template>

<script>
export default {}
</script>

javascript// 使用自定义组件<template>
 <div>
 <custom-component>
 <template v-slot:header>
 <!-- 头部内容 -->
 </template>
 <template v-slot:footer>
 <!-- 尾部内容 -->
 </template>
 </custom-component>
 </div>
</template>

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

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