VUE3 指令 插槽

在Vue 3中，指令和插槽是用于扩展组件功能的重要机制。以下是如何定义和使用指令和插槽的简要例子。

指令：

自定义指令可以用来对某个元素进行底层操作，例如监听键盘或鼠标事件。

// 定义一个自定义指令 `v-focus`，该指令的功能是元素被渲染时自动获取焦点
const app = Vue.createApp({});
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 上时调用
  mounted(el) {
    el.focus();
  }
});

使用：

<input v-focus />

插槽：

插槽是子组件定义可供父组件插入内容的插口。

子组件（MyComponent.vue）：

<template>
  <div>
    <h1>My Component</h1>
    <!-- 定义插槽 -->
    <slot></slot>
  </div>
</template>

父组件：

<template>
  <MyComponent>
    <!-- 向插槽中传入内容 -->
    <p>This is some default content for the slot.</p>
  </MyComponent>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  }
};
</script>

以上是Vue 3中定义和使用指令和插槽的简单例子。在实际应用中，你可以根据需要定义各种不同的指令和插槽，以实现复杂的组件交互。