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

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

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

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

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

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

这样就完成了一个组件的显示，那么我们如何将组件的值传到父页面的，可以通过在组件（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 组件，该组件是一个支持三级联动的插件，比如地区联动，分类联动，可以支持任意模型的三级联动，该插件已经发布到 Dcloud插件市场，有需要的可以到插件市场免费下载使用：通用型封装三级联动，可支持任意模型（如地区联动，分类联动） - DCloud 插件市场