学习Vue---2.Vue组件化编码

一、组件间通信

组件间通信基本原则

1) 不要在子组件中直接修改父组件的状态数据
2) 数据在哪，更新数据的行为(函数)就应该定义在哪

1.props

使用组件标签时：

?

1	<my-component name='tom' :age='3' :set-name='setName'></my-component>

定义 MyComponent 时，在组件内声明所有的 props：

?

1 2 3 4 5 6 7 8 9 10 11 12

// 方式一：只指定名称 props: ['name', 'age', 'setName'] // 方式二：指定名称和类型 props: {     name: String,     age: Number,     setNmae: Function } // 方式三：指定名称/类型/必要性/默认值 props: {     name: {type: String, required: true, default:xxx}, }

注意：

1. 此方式用于父组件向子组件传递数据
2. 所有标签属性都会成为组件对象的属性，模板页面可以直接引用

问题:

1. 如果需要向非子后代传递数据必须多层逐层传递
2. 兄弟组件间也不能直接 props 通信，必须借助父组件才可以

2.vue 的自定义事件

绑定事件监听（绑定在父组件中）

?

1 2 3 4 5 6 7 8

// 方式一: 通过v-on 绑定 @delete_todo="deleteTodo"   // 方式二: 通过$on() <TodoHeader ref="header"/> mounted () {     this.$refs.header.$on('delete_todo', this.deleteTodo) }

触发事件（写在子组件中）

?

1 2	// 触发事件(只能在父组件中接收) this.$emit('delete_todo', data)

注意：

1. 此方式只用于子组件向父组件发送消息(数据)
2. 问题：隔代组件或兄弟组件间通信此种方式不合适

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

3.1 订阅消息

?

1 2 3

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

3.2 发布消息

?

1	PubSub.publish('msg', data)

注意：

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

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

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

1. 目标：标签元素<button>
2. 事件名(类型)：click/focus
3. 回调函数：function(event){}

触发事件(发布消息)

1. DOM 事件：用户在浏览器上对应的界面上做对应的操作
2. 自定义：编码手动触发

4.slot

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

子组件: Child.vue

?

1 2 3 4 5 6 7

<template>     <div>       <slot name="xxx">不确定的标签结构1</slot>         <div>组件确定的标签结构</div>         <slot name="yyy">不确定的标签结构2</slot>     </div> </template>

父组件: Parent.vue

?

1 2 3 4

<child>     <div slot="xxx">xxx 对应的标签结构</div>     <div slot="yyy">yyyy 对应的标签结构</div> </child>

5.vuex

二、axios

为脚手架添加 axios 模块

1.本地安装 axios 模块:

npm i -save axios

2.在脚手架项目源代码的 src/main.js 中，new Vue() 前引入 axios 模块

import axios from "axios" // node_modules中安装的模块，引入时都不用加路径

3.设置 axios 对象的基础路径属性：

axios.defaults.baseURL="http://服务器端域名"

4.将 axios 对象放入 Vue 的原型对象中

Vue.prototype.axios = axios;

5.结果：因为所有组件对象都是 Vue 类型的子对象，所以在所有组件内，任何位置都可用 this.$axios.get() 和 this.$axios.post() 访问 Vue.prototype 中的 axios 对象里的函数。

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 发送 ajax 请求 this.$axios.get('/index')   .then(response => {     console.log(response.data) // 得到返回结果数据   })   .catch(error => {     console.log(error.message)   }) let data = {   pagenum: 1 }; this.$axios   .post("/users/signin", data)   .then(res=>{     console.log(res.data);   })   .catch(err => {       console.log(err.message);    });

三、render 配置

在 main.js 文件中

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 原始写法 new Vue({   el: '#app',   components: { // 将App.vue映射成标签     APP   },   template: '<App/>', // 将App标签转化成模板 }) // 更简洁的写法 new Vue({   el: '#app',   render: h => h(App), })

render 是一个渲染函数，h => h(App) 是一个箭头函数，其参数 h 是一个函数，这个函数执行接收一个参数 App 组件。

h(App) 执行后返回的结果就是 render 的值。

也就是：

+ View Code?

1 2 3 4 5 6 7

new Vue({   el: '#app',   render: function (createElement) { // h就是createElement，用来创建元素标签       return createElement(App) // <App/>   }, }) // 其中App标签被插入到el中

 

 

 

 

参考链接：

【1】Vue 全家桶 | Woc12138