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

一、组件间通信

组件间通信基本原则

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

1.props

使用组件标签时：

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

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

// 方式一：只指定名称
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 的自定义事件

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

// 方式一: 通过v-on 绑定
@delete_todo="deleteTodo"

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

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

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

注意：

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

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

3.1 订阅消息

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

3.2 发布消息

PubSub.publish('msg', data)

注意：

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

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

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

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

触发事件(发布消息)

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

4.slot

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

子组件: Child.vue

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

父组件: Parent.vue

<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 对象里的函数。

// 发送 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 文件中

// 原始写法
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 的值。

也就是：

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

 

 

 

 

参考链接：

【1】Vue 全家桶 | Woc12138