In Uniapp development applet, how to write custom components and implement value transfer

When we are developing uni projects, we often encounter the need to use some common modules, such as a pop-up window and a set of buttons. If written repeatedly for each page, it will take a lot of time and is not conducive. System maintenance and management, so it is necessary for us to write it as a general module to achieve the purpose of arbitrary calling.

All components will be defined in the components directory. If there is no such directory in your new project, you can also create it yourself. The following is the structure of a defined component (shopwind-multpicker):

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

Each component is a folder. After defining the component, we can call it in the view (vue). The code example is as follows:

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

This completes the display of a component, then we How to pass the component value to the parent page, you can use this.$emit method in the component (shopwind-multpicker.vue) file:

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

Then in the parent page, you need to define the emit section A method with the same parameter name (here: confirm) is used to receive the return result of the subcomponent. This method is defined in methods

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

This completes the value transfer of a parent-child page. In this example, it is used The shopwind-multpicker component is a plug-in that supports three-level linkage, such as regional linkage and category linkage. It can support three-level linkage of any model. This plug-in has been released to the Dcloud plug-in market. If you need it, you can download it for free from the plug-in market. Usage: Universal package three-level linkage, can support any model (such as regional linkage, classification linkage) - DCloud plug-in market

The above is the detailed content of In Uniapp development applet, how to write custom components and implement value transfer. For more information, please follow other related articles on the PHP Chinese website!