vue2父组件引入子组件

在Vue.js 2.x中，父组件引入子组件通常有两种常见方式：

1. **通过标签（Tag）的方式**：
父组件模板中，直接使用`<child-component>`标签引用子组件，并可以传入props作为属性。例如：

   <template>
     <div>
       <my-child-component :message="parentMessage"></my-child-component>
     </div>
   </template>

   <script>
   import MyChildComponent from './MyChildComponent.vue';
   export default {
     components: { MyChildComponent },
     data() {
       return {
         parentMessage: 'Hello from parent'
       };
     }
   };
   </script>

2. **通过组件选项插槽（Slots）的方式**：
如果想在特定区域动态插入子组件的内容，可以使用插槽。父组件提供一个或多个插槽，然后子组件在其内部内容中填充这些插槽。比如：

   <template>
     <div>
       <slot name="customSlot">这是默认内容</slot>
       <my-child-component>
         <template slot="customSlot">
           我是来自子组件的内容
         </template>
       </my-child-component>
     </div>
   </template>

然后在父组件中使用：

   <parent-component>
     <p slot="customSlot">这是父组件传递给子组件的内容</p>
   </parent-component>