uniapp封装组件传递对象

在 uniapp 中，可以通过 props 属性来传递对象给封装的组件。具体步骤如下：

1. 在父组件中定义一个对象，例如：

data() {
  return {
    obj: {
      name: '张三',
      age: 20
    }
  }
}

2. 在父组件中通过 props 将对象传递给子组件，例如：

<template>
  <child :obj="obj"></child>
</template>

<script>
import child from '@/components/child'

export default {
  components: {
    child
  },
  data() {
    return {
      obj: {
        name: '张三',
        age: 20
      }
    }
  }
}
</script>

3. 在子组件中声明 props 接收传递的对象，例如：

<template>
  <div>{{ obj.name }}，{{ obj.age }}</div>
</template>

<script>
export default {
  props: {
    obj: Object
  }
}
</script>

这样就可以在封装的组件中使用传递过来的对象了。

相关问题

uniapp封装组件并示例

Uniapp 是一个跨平台的开发框架，可以方便地开发出同时支持多个平台的应用程序。在 Uniapp 中封装组件可以提高代码复用性，使得开发更加高效。下面是一个简单的封装组件的示例：

1. 创建组件

在项目中的 `components` 文件夹下创建一个 `HelloWorld` 组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  }
}
</script>

这个组件只是简单地显示一个文本信息，可以通过 `props` 属性传递要显示的信息。

2. 使用组件

在需要使用 `HelloWorld` 组件的页面中，可以通过以下方式引入组件：

<template>
  <div>
    <HelloWorld message="Hello, Uniapp!" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

在这个页面中，我们引入了 `HelloWorld` 组件，并且使用了 `message` 属性来传递要显示的信息。

以上就是一个简单的封装组件的示例。在实际开发中，根据需要可以编写更复杂的组件，并且可以灵活地使用 `props`、`events` 等属性和方法来传递数据和交互。

uniapp 封装axios

Uniapp是基于Vue.js框架开发的跨平台应用开发框架，可以用来开发各种类型的应用程序。在Uniapp中，我们可以使用Axios来进行网络请求，Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中用于发送HTTP请求。

下面是封装Axios的步骤：

1. 在Uniapp中安装Axios：在命令行中使用npm install axios命令来安装Axios。

2. 在Uniapp项目中创建一个api.js文件：这个文件用于封装Axios，并且定义一些常用的API接口。

3. 在api.js文件中引入Axios：在api.js文件中使用import axios from 'axios'来引入Axios。

4. 封装Axios：在api.js文件中封装Axios，定义一些常用的请求方法，如get、post、put、delete等。

下面是一个简单的封装Axios的例子：

import axios from 'axios'

const service = axios.create({
  baseURL: 'http://localhost:3000/api', // API请求的默认地址
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前可以做一些处理，如添加token等
    return config
  },
  error => {
    // 处理请求错误
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应返回之前可以做一些处理，如判断响应结果的状态码等
    return response.data
  },
  error => {
    // 处理响应错误
    console.log(error)
    return Promise.reject(error)
  }
)

export default {
  get(url, params) {
    return service({
      method: 'get',
      url,
      params
    })
  },

  post(url, data) {
    return service({
      method: 'post',
      url,
      data
    })
  },

  put(url, data) {
    return service({
      method: 'put',
      url,
      data
    })
  },

  delete(url, params) {
    return service({
      method: 'delete',
      url,
      params
    })
  }
}

在上面的代码中，我们首先使用axios.create方法创建了一个axios实例，并且定义了一些默认的请求参数，如请求的地址和请求超时时间。然后我们使用拦截器对请求和响应进行了处理，可以在请求发送之前和响应返回之前添加一些处理逻辑，比如添加token、判断状态码等。最后我们定义了一些常用的请求方法，如get、post、put、delete等，这些方法都是基于我们创建的axios实例来发送请求的。

使用封装好的Axios来发送请求非常简单，只需要在组件中引入api.js文件，然后使用封装好的方法即可，如下面的例子：

import api from '@/api'

export default {
  created() {
    // 发送get请求
    api.get('/list', { page: 1, size: 10 }).then(res => {
      console.log(res)
    })

    // 发送post请求
    api.post('/login', { username: 'admin', password: '123456' }).then(res => {
      console.log(res)
    })
  }
}

在上面的代码中，我们首先引入了api.js文件，并且使用api.get和api.post方法来发送get和post请求，分别传递了请求的地址和请求参数。发送请求后，我们可以通过then方法来处理响应结果。