Uniapp开发小程序中，如何编写自定义组件(component)并实现传值

我们在做uni项目开发的时候，经常会遇到要使用一些通用的模块，比如一个弹窗，一组按钮，如果每个页面重复编写，比如会耗费很大的时间，也不利于系统的维护和管理，所以我们有必要把它写成一个通用的模块，以实现任意调用的目的。

所有的组件都会被定义在components目录下，如果您新建的项目中没有这个目录，也可以自己创建，如下就是一个被定义好的组件(shopwind-multpicker)结构:

components/
  shopwind-multpicker/
    shopwind-multpicker.js
    shopwind-multpicker.vue
pages/
static/
App.vue

每个组件就是一个文件夹，定义好组件之后，我们就可以在视图（vue）中调用，代码示例如下：

这样就完成了一个组件的显示，那么我们如何将组件的值传到父页面的，可以通过在组件（shopwind-multpicker.vue）文件中使用 this.$emit 方法：

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

然后在父页面中，你需要定义跟emit第一个参数名称一致的方法（这里为：confirm）来接收字组件的返回结果，这个方法定义在methods中

// 父页面的vue文件
export default {
  data() {
    return {}
  },
  methods: {
    confirm(result) {
      // 这里可以获取您选择后返回的数据
      console.log(result)
    }
  }
}

这样就完成了一个父子页面的传值，本例中使用了 shopwind-multpicker 组件，该组件是一个支持三级联动的插件，比如地区联动，分类联动，可以支持任意模型的三级联动，效果展示如下

地区分类组件