vue 引入页面组件

Vue.js 引入页面组件通常有以下几种常见方式：

1. **通过标签引入**：这是最直观的方式，在HTML模板中直接使用`<template>`或`<component>`标签，并指定`is`属性指向需要加载的组件。例如：

<template>
  <my-component></my-component>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
  components: {
    MyComponent
  }
};
</script>

在这里，`MyComponent.vue`是你在`src/components`目录下的组件文件。

2. **通过导入导出**：如果你的组件已经被其他地方导出了，你可以直接导入并在组件内使用。例如：

<template>
  <div>
    <child-comp :props="someData"></child-comp>
  </div>
</template>

<script>
import ChildComp from '@/components/ChildComp.vue';

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      someData: 'parent data'
    };
  }
};
</script>

3. **动态组件**：有时候你需要在运行时决定使用哪个组件，可以使用`v-bind:is`绑定动态组件名：

<template>
  <component v-bind:is="currentComponent" :data="componentData"></component>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent', // 可以为字符串或函数返回值
      componentData: { ... }, // 组件所需的初始数据
    };
  },
  methods: {
    switchComponent(newComponent) {
      this.currentComponent = newComponent;
    }
  }
};
</script>