vue如何封装一个组件

vue如何封装一个组件

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

1.新增子组件

在工程src->components目录下新建一个文件夹用于存放组件。
我封装了一个树组件，文件夹名称为va-tree,里面有一个va-tree.vue文件，写了树组件的具体内容，包括组件样式、组件处理逻辑、组件模板等等

子组件中定义的props是父组件需要传给子组件的数据，在子组件中props里面定义名称和类型
下图中：
data是树组件展示的数据，需要从父组件中获取，在props里面定义templates:Array,然后再赋值给:data="templates"，这样树组件就有数据了

2.处理父组件

上面所说的父组件传给子组件的templates，在父组件中也需要定义。
如下图：
在父组件中引用自组件并在components里面定义，然后直接在templates里面是用<v-tree></v-tree>即可，里面:templates="templates"即为传给子组件的值
然后在需要使用组件的vue文件中引用组件

3.子组件调用父组件

在子组件中如何调用父组件的方法，可以使用$emit调用，并传递参数进行修改
// 父组件

<v-tree @selectNodes="check" :templates="templates></v-tree>
check(value) {
        this.selectNodes= value
        console.log(this.selectNodes)
      }

// 子组件

this.$emit('selectNodes', node)

4.关于父子组件之间的通信还可以使用ref 通信

具体使用方法为父组件里面设置ref，然后通过$refs对象来获取子组件的数据，再进行操作，这个方法有时候会报错，不建议经常使用