ajax通讯机制,组件间通信与ajax的请求方式

组件定义与使用

1. vue 文件的组成(3 个部分)

1)模板页面

页面模板

2)JS 模块对象

export default {

data() {return {}},

methods: {},

computed: {},

components: {}

}

3)样式

样式定义

2. 基本使用

1)引入组件

2)映射成标签

3)使用组件标签

import HelloWorld from './components/HelloWorld'

export default {

components: {

HelloWorld

}

}

3. 关于标签名与标签属性名书写问题

1)写法一：一模一样

2)写法二：大写变小写, 并用-连接

组件间通信

1. 组件间通信基本原则

1)不要在子组件中直接修改父组件的状态数据

2)数据在哪, 更新数据的行为(函数)就应该定义在哪

2. vue 组件间通信方式

1)props

2)vue 的自定义事件

3)消息订阅与发布(如: pubsub 库)

4)slot

5)vuex

组件间通信 1: props

1. 使用组件标签时

2. 定义 MyComponent 时

1)在组件内声明所有的 props

2)方式一: 只指定名称

props: ['name', 'age', 'setName']

3)方式二: 指定名称和类型

props: {

name: String, age: Number,

setNmae: Function

}

4)方式三: 指定名称/类型/必要性/默认值

props: {

name: {type: String, required: true, default:xxx},

}

3. 注意

1)此方式用于父组件向子组件传递数据

2)所有标签属性都会成为组件对象的属性, 模板页面可以直接引用

3)问题:

a.如果需要向非子后代传递数据必须多层逐层传递

b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

组件间通信 2: vue 自定义事件

1. 绑定事件监听

// 方式一：通过 v-on 绑定

@delete_todo="deleteTodo"

// 方式二：通过

refs.xxx.$on('delete_todo', function (todo) {

this.deleteTodo(todo)

})

2. 触发事件

// 触发事件(只能在父组件中接收)

this.$emit(eventName, data)

3. 注意:

1)此方式只用于子组件向父组件发送消息(数据)

2)问题: 隔代组件或兄弟组件间通信此种方式不合适

组件间通信 3: 消息订阅与发布(PubSubJS 库)

1. 订阅消息

PubSub.subscribe('msg', function(msg, data){})

2. 发布消息

PubSub.publish('msg', data)

3. 注意

优点: 此方式可实现任意关系组件间通信(数据)

4. 事件的 2 个重要操作(总结)

1)绑定事件监听 (订阅消息)

目标: 标签元素

事件名(类型): click/focus

回调函数: function(event){}

2)触发事件 (发布消息)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作

自定义: 编码手动触发

组件间通信 4: slot

1. 理解

此方式用于父组件向子组件传递标签数据

2. 子组件: Child.vue

不确定的标签结构 1

组件确定的标签结构

不确定的标签结构 2

3. 父组件: Parent.vue

xxx 对应的标签结构

yyyy 对应的标签结构

vue 项目中常用的 2 个 ajax 库

1.vue-resource

vue 插件, 非官方库, vue1.x 使用广泛

2.axios

通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛

vue-resource 的使用

1. 在线文档

2. 下载

npm install vue-resource --save

3. 编码

// 引入模块

import VueResource from 'vue-resource'

// 使用插件

Vue.use(VueResource)

// 通过 vue/组件对象发送 ajax 请求

this.$http.get('/someUrl').then((response) => {

// success callback

console.log(response.data) //返回结果数据

}, (response) => {

// error callback

console.log(response.statusText) //错误信息

})

axios 的使用

1. 在线文档

2. 下载:

npm install axios --save

3. 编码

// 引入模块

import axios from 'axios'

// 发送 ajax 请求

axios.get(url)

.then(response => {

console.log(response.data) // 得到返回结果数据

})

.catch(error => {

console.log(error.message)

})

4. 测试接口