从vue文件中抽取出子组件的流程及过程中踩过的坑

流程：

1. 确保注册、引入子组件的正确性：

创建一个新的vue文件，包含基本的template,及export的内容，其中可简单包含空的data函数。暂时先不把子组件中的代码移出。在父组件中import进该子组件的.vue文件，要注意的是路径名要正确，“../”表示的是当前文件所在目录的上层目录，“./”表示的是当前文件夹下。所以，如果子组件和父组件在同一个目录下，只需在父组件中加上：

import ChildComponent from './ChildComponent.vue‘；

引入子组件后，需要在父组件中注册子组件，主需要在父组件的components属性中注册该子组件：

components: {

'child-component': ChildComponent

}

这样就注册成功了，不需要调用new ChildComponent()

2.移出组件相关的template,及method，定义好父组件及子组件的接口：props{}，props在子组件中定义，父组件中传入。父组件中若需传入动态值，则在父组件中可以用v-bind绑定传入的值。

踩过的坑（比较