面试题：Vue插槽：动态内容插入的基本实现

Question

在Vue项目中，有一个基础组件，比如 <my - component>。请描述如何通过Vue插槽在这个组件内实现动态文本内容的插入，并展示关键代码示例。假设传递进来的动态文本是从父组件的数据属性中获取的。

Answer 1

1. 在基础组件 my - component.vue 中定义插槽：

   <template>
     <div>
       <slot></slot>
     </div>
   </template>
   

   这里使用 <slot> 标签定义了一个匿名插槽，它是一个占位符，用于父组件插入内容。
2. 在父组件中使用基础组件并插入动态文本：

   <template>
     <div>
       <my - component>
         {{ dynamicText }}
       </my - component>
     </div>
   </template>
   <script>
   import myComponent from './my - component.vue';
   export default {
     components: {
       myComponent
     },
     data() {
       return {
         dynamicText: '这是来自父组件的动态文本'
       };
     }
   };
   </script>
   

   在父组件中，将 dynamicText 数据属性的值插入到了 <my - component> 的插槽位置。

如果要使用具名插槽，步骤如下：

1. 在基础组件 my - component.vue 中定义具名插槽：

   <template>
     <div>
       <slot name="text - slot"></slot>
     </div>
   </template>
   

2. 在父组件中使用基础组件并插入动态文本到具名插槽：

   <template>
     <div>
       <my - component>
         <template v - slot:text - slot>
           {{ dynamicText }}
         </template>
       </my - component>
     </div>
   </template>
   <script>
   import myComponent from './my - component.vue';
   export default {
     components: {
       myComponent
     },
     data() {
       return {
         dynamicText: '这是来自父组件的动态具名插槽文本'
       };
     }
   };
   </script>
   

   这里使用 v - slot:text - slot 语法将内容插入到具名插槽 text - slot 中。