@前端俊哥儿乐___ 的技术博客

Appearance

组件通信 ​

1. 父子组件如何通过 props 和 $emit 进行通信？ ​

答案：

  1. 父组件向子组件传递数据：

    • 在父组件中，通过 props 向子组件传递数据
    • 在子组件中，通过 props 选项声明它要接收的数据

  2. 子组件向父组件传递数据：

    • 在子组件中，通过 $emit 触发一个自定义事件
    • 在父组件中，监听这个事件并在回调函数中接收数据

示例：

vue
<!-- 父组件 -->
<template>
  <child-component :message="parentMessage" @child-event="handleChildEvent"/>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received from child:', data)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendToParent() {
      this.$emit('child-event', 'Hello from child')
    }
  }
}
</script>

2. 如何使用 provide 和 inject 在祖先和后代组件间传递数据？ ​

答案：provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

  1. 在祖先组件中使用 provide 来提供数据：
javascript
export default {
  provide: {
    foo: 'bar'
  }
  // 或
  provide() {
    return {
      foo: this.foo
    }
  }
}
  1. 在后代组件中使用 inject 来接收数据：
javascript
export default {
  inject: ['foo']
}

注意：provide 和 inject 绑定并不是可响应的。但是可以传入一个可监听的对象。

3. Vue 中的事件总线（Event Bus）是什么？如何使用？ ​

答案：事件总线是一种在 Vue 中实现跨组件通信的方式，特别适用于兄弟组件或者跨多层级的组件通信。

使用步骤：

  1. 创建一个事件总线：
javascript
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
  1. 在发送组件中触发事件：
javascript
import { EventBus } from './eventBus.js'

EventBus.$emit('custom-event', { ... })
  1. 在接收组件中监听事件：
javascript
import { EventBus } from './eventBus.js'

created() {
  EventBus.$on('custom-event', data => {
    console.log(data)
  })
}

注意：在 Vue 3 中，事件总线模式已被移除，官方推荐使用 mitt 或 tiny-emitter 等第三方库来实现类似功能。

4. Vuex 在组件通信中的作用是什么？ ​

答案：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 在组件通信中的作用：

  1. 集中管理共享的数据状态
  2. 提供了一种跨组件、跨层级的数据共享方案
  3. 通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码将会变得更结构化且易维护

基本使用：

javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 在组件中使用
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}

5. 如何实现父组件调用子组件的方法？ ​

答案：可以通过 ref 来实现父组件调用子组件的方法。

步骤：

  1. 在父组件中给子组件设置一个 ref
  2. 通过 this.$refs.refName 来访问子组件实例
  3. 调用子组件的方法

示例：

vue
<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComp"/>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComp.childMethod()
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called')
    }
  }
}
</script>

6. Vue 3 中的 defineEmits 和 defineProps 是什么？ ​

答案：defineEmits 和 defineProps 是 Vue 3 中新引入的用于在 <script setup> 中声明 props 和 emits 的编译器宏。

使用示例：

vue
<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])

// 使用 props
console.log(props.foo)

// 触发事件
emit('change')
</script>

这种方式比 Vue 2 中的声明方式更加简洁，并且提供了更好的类型推断。

7. 如何在 Vue 中实现跨组件插槽（slot）？ ​

答案：Vue 提供了插槽（slot）机制来实现内容分发。有三类型的插槽：默认插槽、具名插槽和作用域插槽。

  1. 默认插槽：
vue
<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<child-component>
  <p>这是默认插槽内容</p>
</child-component>
  1. 具名插槽：
vue
<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 -->
<child-component>
  <template v-slot:header>
    <h1>这是头部</h1>
  </template>
  <p>这是主体内容</p>
  <template v-slot:footer>
    <p>这是底部</p>
  </template>
</child-component>
  1. 作用域插槽：
vue
<!-- 子组件 -->
<template>
  <ul>
    <li v-for="item in items">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

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

8. Vue 中的 .sync 修饰符是什么？在 Vue 3 中如何替代？ ​

答案：.sync 修饰符是 Vue 2 中用于实现双向绑定的一种简写方式。

在 Vue 2 中：

vue
<child-component :title.sync="pageTitle" />

这等价于：

vue
<child-component
  :title="pageTitle"
  @update:title="pageTitle = $event"
/>

在 Vue 3 中，.sync 修饰符被移除，取而代之的是可以使用 v-model 的参数：

vue
<child-component v-model:title="pageTitle" />

在子组件中，你可以这样触发更新：

javascript
this.$emit('update:title', newValue)

这种新的方式使得自定义组件的双向绑定更加明确和灵活。

9. 如何在 Vue 中实现组件之间的双向绑定？ ​

答案：在 Vue 中实现组件之间的双向绑定主要有以下几种方式：

  1. 使用 v-model：

    • 父组件：
      vue
      <custom-input v-model="searchText" />
    • 子组件：
      vue
      <template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

  2. 使用 .sync 修饰符（Vue 2）或 v-model 参数（Vue 3）：

    • Vue 2：
      vue
      <custom-component :title.sync="pageTitle" />
    • Vue 3：
      vue
      <custom-component v-model:title="pageTitle" />

  3. 使用计算属性：

    vue
    <script>
export default {
  props: ['value'],
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      }
    }
  }
}
</script>

这些方法都能实现双向绑定，选择哪种方式取决于具体的使用场景和 Vue 的版本。

10. 如何在 Vue 3 的组合式 API 中实现组件通信？ ​

答案：在 Vue 3 的组合式 API 中，我们可以使用以下方式实现组件通信：

  1. Props 和 Emits：
vue
<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps(['message'])
const emit = defineEmits(['update'])

const sendToParent = () => {
  emit('update', 'New message')
}
</script>
  1. 提供/注入（Provide/Inject）：
javascript
// 在父组件中
import { provide, ref } from 'vue'

const message = ref('Hello')
provide('message', message)

// 在子组件中
import { inject } from 'vue'

const message = inject('message')
  1. 状态管理库（如 Vuex 或 Pinia）：
javascript
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    
    const increment = () => {
      store.commit('increment')
    }

    return {
      count: computed(() => store.state.count),
      increment
    }
  }
}
  1. 使用 ref 和 expose：
vue
<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

const callChildMethod = () => {
  childRef.value.childMethod()
}
</script>

<template>
  <ChildComponent ref="childRef" />
</template>

<!-- 子组件 -->
<script setup>
import { ref } from 'vue'

const count = ref(0)

const childMethod = () => {
  count.value++
}

defineExpose({ childMethod })
</script>

11. 如何在 Vue 中实现兄弟组件之间的通信？ ​

答案：在 Vue 中实现兄弟组件之间的通信有几种方法：

  1. 通过共同的父组件：

    • 将共享的状态提升到父组件
    • 通过 props 将状态传递给子组件
    • 子组件通过 emit 事件来更新父组件的状态

  2. 使用事件总线（Event Bus）：

    • 创建一个空的 Vue 实例作为事件总线
    • 一个组件emit事件，另一个组件监听该事件

  3. 使用 Vuex：

    • 将共享状态放在 Vuex store 中
    • 各个组件都可以访问和修改这个状态

  4. 使用 provide/inject（适用于祖先和后代组件）

示例（使用事件总线）：

javascript
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// ComponentA.vue
import { EventBus } from './eventBus.js'
EventBus.$emit('myEvent', data)

// ComponentB.vue
import { EventBus } from './eventBus.js'
EventBus.$on('myEvent', data => {
  console.log(data)
})

12. Vue 3 的 setup 函数中如何使用 props？ ​

答案：在 Vue 3 的 setup 函数中，props 是作为第一个参数传入的。我们可以使用 defineProps 编译器宏来声明 props。

示例：

vue
<script setup>
import { defineProps, toRefs } from 'vue'

const props = defineProps({
  title: String,
  likes: Number
})

// 访问 props
console.log(props.title)

// 如果需要解构 props 并保持响应性，可以使用 toRefs
const { title, likes } = toRefs(props)
</script>

注意，在 <script setup> 中，props 是响应式的，可以直接在模板中使用。但如果要在 setup 函数中解构 props，需要使用 toRefs 来保持响应性。

13. 如何在 Vue 中实现组件的动态加载？ ​

答案：Vue 提供了几种方式来实现组件的动态加载：

  1. 使用 v-if 条件渲染：
vue
<template>
  <component-a v-if="componentName === 'A'"></component-a>
  <component-b v-else-if="componentName === 'B'"></component-b>
</template>
  1. 使用动态组件 <component>:
vue
<template>
  <component :is="currentComponent"></component>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>
  1. 使用异步组件（推荐用于大型应用）：
javascript
const AsyncComponent = () => import('./AsyncComponent.vue')

在 Vue 3 中，我们可以使用 defineAsyncComponent:

javascript
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

这种方式可以实现按需加载，提高应用性能。

14. Vue 3 中的 emits 选项有什么作用？ ​

答案：Vue 3 中的 emits 选项用于声明一个组件可能触发的所有事件。这有几个好处：

  1. 文档化：它可以作为组件 API 的一部分，清晰地表明组件可能触发哪些事件。
  2. 类型检查：如果使用 TypeScript，可以对触发的事件进行类型检查。
  3. 验证：可以为事件添加验证函数，确保触发的事件数据符合预期。

使用示例：

javascript
export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit', { ... })  // 正确
    emit('non-existent-event')  // 会给出警告
  }
}

使用对象语法进行验证：

javascript
export default {
  emits: {
    submit: payload => {
      // 返回 `true` 或 `false` 表示验证通过或失败
      return payload.email !== undefined
    }
  }
}

在 <script setup> 中，可以使用 defineEmits 宏：

vue
<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function handleSubmit() {
  emit('submit', { ... })
}
</script>

15. 如何在 Vue 中实现组件之间的循环引用？ ​

答案：在 Vue 中，有时我们可能需要两个组件互相引用对方。这种情况下，我们需要使用 Vue 的异步组件和 Webpack 的代码分割功能来解决循环依赖问题。

步骤如下：

  1. 将其中一个组件设置为异步组件：
javascript
// ComponentA.vue
export default {
  name: 'ComponentA',
  components: {
    ComponentB: () => import('./ComponentB.vue')
  }
}

// ComponentB.vue
export default {
  name: 'ComponentB',
  components: {
    ComponentA: () => import('./ComponentA.vue')
  }
}
  1. 在父组件中使用这些组件：
vue
<template>
  <div>
    <component-a></component-a>
    <component-b></component-b>
  </div>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

这种方式可以解决循环引用问题，同时也能提高应用的性能，因为组件会被异步加载。

在 Vue 3 中，我们可以使用 defineAsyncComponent:

javascript
import { defineAsyncComponent } from 'vue'

const ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'))
const ComponentB = defineAsyncComponent(() => import('./ComponentB.vue'))

这种方法可以有效地处理组件之间的循环依赖，并且不会影响应用的正常运行。