Where uniapp writes public methods

When developing using uniapp, we usually write some public methods to facilitate daily development. So, where should these public methods be written? This article will introduce where to write public methods in uniapp.

1. Writing public methods in components

When developing uniapp applications, we usually use components to build UI interfaces. In a component, you can write some public methods to facilitate the use of the component. These public methods are usually defined in the component's methods, as shown below:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="changeMsg">修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    changeMsg() {
      this.msg = '你好，世界！'
      // 其他公共方法
    }
  }
}
</script>

In the above code, we defined a public method changeMsg in the component. When the button is clicked, this method will be called Called to modify the value of msg.

2. Write public methods in mixin

mixin is a code reuse method provided by uniapp. Through mixin, we can extract some public code. and reused in multiple components. In mixins, you can also write public methods to facilitate daily development. The following is a sample code for defining a public method in a mixin:

export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    changeMsg() {
      this.msg = '你好，世界！'
      // 其他公共方法
    }
  }
}

In the above code, we define the public method changeMsg in the mixin and export the mixin. In this way, we can import the mixin in the component and use its public methods.

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="changeMsg">修改</button>
  </div>
</template>

<script>
import commonMixin from '@/mixins/commonMixin'

export default {
  mixins: [commonMixin]
}
</script>

In the above code, we imported commonMixin in the component and added it to the mixins so that we can use the public methods in commonMixin in the component.

3. Write public methods in tool classes

When developing uniapp, we may write some tool classes to facilitate daily development. In the tool class, we can also write some public methods for convenient use. Typically, utility classes are introduced globally for use throughout the application. The following is a sample code for defining a public method in a tool class:

export function changeString(str) {
  return str.replace('World', '世界')
  // 其他公共方法
}

In the above code, we define the public method changeString in the tool class and export it. This way, we can use this public method throughout the application.

import { changeString } from '@/utils/commonUtils'

console.log(changeString('Hello World!'))

In the above code, we use the changeString method in commonUtils in a certain page or component, thus modifying 'World' in the string to 'World'.

Summary:

In uniapp, there are many ways to write public methods, such as in components, mixins, tool classes, etc. We need to choose the most appropriate method according to the specific situation to facilitate daily development.

The above is the detailed content of Where uniapp writes public methods. For more information, please follow other related articles on the PHP Chinese website!