Vue 轻松引组件、传数据、互调用

2023-11-05 18:11:18

Vue 组件协作：数据共享和方法调用的艺术

在 Vue.js 的模块化开发理念中，组件协作至关重要。通过组件之间的数据共享和方法调用，我们可以构建出可复用、高效且维护性强的应用程序。本文将深入探讨 Vue.js 中组件协作的奥秘，涵盖所有你需要了解的主题。

1. 组件引用：构建分层架构

Vue.js 中的组件引用就如同 HTML 中的标签引用一样简单。使用 <component> 标签即可，并指定组件的名称即可。例如：

<!-- home.vue -->
<template>
  <div>
    <head-view></head-view>
  </div>
</template>

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

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

2. 数据共享：组件间的无缝通信

数据共享在组件协作中至关重要，Vue.js 提供了多种方式来实现它。

2.1 Props：单向数据流

Props 允许父组件将数据传递给子组件，实现单向数据流。在父组件中，通过 props 将数据绑定到子组件：

<!-- home.vue -->
<template>
  <div>
    <head-view :title="title"></head-view>
  </div>
</template>

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

export default {
  components: {
    headView
  },
  data() {
    return {
      title: '组件协作'
    }
  }
}
</script>

在子组件中，使用 props 接收父组件传递的数据：

<!-- headView.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

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

2.2 事件：触发跨组件事件

事件允许子组件向父组件触发事件，实现双向通信。在子组件中，使用 $emit 触发事件：

<!-- headView.vue -->
<template>
  <div>
    <input type="text" v-model="newTitle">
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTitle: ''
    }
  },
  methods: {
    changeTitle() {
      this.$emit('changeTitle', this.newTitle)
    }
  }
}
</script>

在父组件中，使用 @ 绑定事件监听器：

<!-- home.vue -->
<template>
  <div>
    <head-view @changeTitle="handleTitleChange"></head-view>
  </div>
</template>

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

export default {
  components: {
    headView
  },
  methods: {
    handleTitleChange(newTitle) {
      this.title = newTitle
    }
  }
}
</script>

2.3 $refs：访问子组件实例

refs 允许父组件获取子组件的实例，从而可以调用子组件的方法。在父组件中，使用 `refs` 获取子组件实例：

<!-- home.vue -->
<template>
  <div>
    <head-view ref="headView"></head-view>
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

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

export default {
  components: {
    headView
  },
  methods: {
    changeTitle() {
      this.$refs.headView.changeTitle('新标题')
    }
  }
}
</script>