当前位置：首页 > news >正文

关于Vue前端接口对接的思考

news 2025/7/19 8:00:40

关于Vue前端接口对接的思考

目录
- 概述
- - 需求：
- 设计思路
- 实现思路分析
- - 1.vue 组件分类和获取数值的方式
  - 2.http 通信方式分类如何对接
  - 3.vue 组件分类和赋值方式，
参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

全局组件（Global Components）：全局组件是在Vue实例化前定义的组件，可以在任何地方使用。可以通过Vue.component方法全局注册组件，或者在Vue实例中的components属性上注册组件。
局部组件（Local Components）：局部组件是在Vue实例中定义的组件，只能在该Vue实例的范围内使用。可以在Vue实例的components属性中注册组件。
私有组件（Private Components）：私有组件是在其他组件内部定义的组件，只能在该组件的范围内使用。可以在父组件的components属性中注册私有组件。

获取数值的方式取决于数据是在父组件传递给子组件还是在子组件自己定义的。以下是常见的获取数值的方式：

父组件传值给子组件：父组件通过属性的形式将数据传递给子组件，子组件可以通过props选项接收数据。在子组件中，可以通过this.$props或者直接使用props定义的变量名来获取父组件传递的数据。
子组件自定义数据：子组件可以在自己的data选项中定义数据，并通过模板或者计算属性等方式获取和使用这些数据。
子组件事件传递数据给父组件：子组件可以通过$emit方法触发自定义事件，并传递数据给父组件。父组件可以通过在子组件上监听对应的事件来获取数据。

这些是Vue中常见的组件分类和获取数值的方式，具体使用方法可以参考Vue的官方文档。
其实绝大部分的场景中我们都可以尝试对应的localstrore 存取的方式进行处理。

要获取 Vue 组件中的值，可以使用以下几种方法：

使用 v-model 双向绑定：在组件中的输入框或其他表单元素上使用 v-model 指令绑定一个父组件的数据属性。当用户在子组件中修改输入框的值时，父组件的数据属性也会跟着更新。这样就可以通过访问父组件的数据属性来获取组件中的值。

<template><input v-model="value" type="text">
</template><script>
export default {props: ['value']
}
</script>

使用 $emit 事件：在子组件中通过 $emit 方法触发一个自定义事件，并传递需要传递的值。在父组件中通过在子组件上使用 v-on 指令监听该事件，并在触发时执行相应的方法来获取传递的值。

<template><button @click="onClick">Click me</button>
</template><script>
export default {methods: {onClick() {this.$emit('button-clicked', 'Hello!')}}
}
</script>

<template><child-component @button-clicked="onButtonClicked"></child-component>
</template><script>
export default {methods: {onButtonClicked(value) {console.log(value) // 输出：Hello!}}
}
</script>

使用 ref 引用：在父组件中通过在子组件上使用 ref 属性为子组件指定一个引用名称，然后通过访问 this.$refs 对象来获取子组件实例。然后可以使用子组件实例的方法和属性来获取需要的值。

<template><child-component ref="childComponentRef"></child-component>
</template><script>
export default {mounted() {const childComponent = this.$refs.childComponentRefconst value = childComponent.getValue()console.log(value)}
}
</script>

如何获取具体的组件数值参看对应的API文档。

2.http 通信方式分类如何对接

HTTP通信方式可以分为以下几种分类：

请求方式分类：HTTP通信可以通过不同的请求方式进行交互，包括GET、POST、PUT、DELETE等。
数据格式分类：HTTP通信可以通过不同的数据格式进行传输，包括普通文本、JSON、XML等。
接口类型分类：HTTP通信可以用于不同的接口类型，包括Web接口、RESTful接口、SOAP接口等。

对接HTTP通信方式，一般需要以下步骤：

确定通信方式：根据具体需求，选择合适的请求方式进行通信。
构建请求数据：根据接口要求，构建合适的请求数据，包括URL、请求头、请求体等。
发送请求：使用相应的编程语言或工具库，发送HTTP请求。
处理响应：接收到服务器的响应后，根据响应数据进行处理，可以是解析响应数据、处理异常情况等。
解析响应数据：根据接口要求，解析响应数据，可以是从响应数据中提取需要的信息。
后续处理：根据业务需求，对响应数据进行后续的处理，例如存储、展示、分析等。

接入HTTP通信方式的具体实现取决于开发环境和编程语言，可以使用各种编程语言提供的HTTP库或框架，如Python的requests库、Java的HttpClient等。
最佳实践是先用工具测试完成后，拼成要素报文传递即可。通常来说都是基于JSON的restful 和xml 的SOAP。

3.vue 组件分类和赋值方式，

Vue具体组件有很多种，常见的包括但不限于：按钮组件、输入框组件、选择器组件、日历组件、对话框组件、表格组件等。

赋值方式有多种，取决于组件的属性和父组件调用时的需求。以下是一些常见的赋值方式：

静态赋值：直接在组件标签内部使用属性进行赋值，例如：
```
<my-component message="Hello"></my-component>
```
在组件内部通过props属性接收该值：
```
props: {message: String
},
```
动态赋值：使用v-bind指令将数据动态绑定到组件的属性上，例如：
```
<my-component :message="myMessage"></my-component>
```
在组件内部通过props属性接收该值：
```
props: {message: String
},
```
传递整个对象：可以将一个对象作为属性传递给子组件，例如：
```
<my-component :user="userInfo"></my-component>
```
在组件内部通过props属性接收该对象：
```
props: {user: Object
},
```
通过事件传递数据：当需要从子组件向父组件传递数据时，可以使用自定义事件。子组件通过$emit方法触发事件并传递数据，父组件通过在子组件标签上使用v-on指令监听事件并获取数据，例如：
在子组件中触发事件：
```
this.$emit('update', data);
```
在父组件中监听事件：
```
<my-component @update="handleUpdate"></my-component>
```
在父组件中定义事件处理方法：
```
methods: {handleUpdate(data) {// 处理传递的数据}
}
```

Vue具体组件有很多，下面列举一些常用的组件：

按钮组件（Button）：用于创建按钮，可以设置不同的样式和功能。
输入框组件（Input）：用于接收用户的输入，可以设置输入框的类型和验证规则。
列表组件（List）：用于展示数据列表，可以进行分页、排序等操作。
菜单组件（Menu）：用于创建导航菜单，可以设置菜单的样式和功能。
弹窗组件（Modal）：用于显示弹窗，可以通过设置属性来控制弹窗的内容和样式。
图片组件（Image）：用于显示图片，可以设置图片的大小和样式。
表格组件（Table）：用于展示表格数据，可以设置表格的列和数据。
标签组件（Tag）：用于创建标签，可以设置标签的样式和点击事件。
图表组件（Chart）：用于绘制图表，可以根据数据生成柱状图、折线图等。

赋值使用案例：

假设有一个用户信息的组件，可以将用户信息传递给组件进行展示。

HTML模板：

<template><div><h2>{{ user.name }}</h2><p>{{ user.age }}</p><p>{{ user.email }}</p></div>
</template>

Vue脚本：

<script>
export default {name: 'UserInfo',props: {user: {type: Object,required: true}}
}
</script>

使用组件并传递用户信息：

<template><div><user-info :user="userInfo"></user-info></div>
</template><script>
import UserInfo from './UserInfo.vue'export default {name: 'App',data() {return {userInfo: {name: '张三',age: 20,email: 'zhangsan@example.com'}}},components: {UserInfo}
}
</script>