三个小时vue3.x从零到实战（中）（vue3.x高级语法）
Posted cui_yonghua
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三个小时vue3.x从零到实战（中）（vue3.x高级语法）相关的知识，希望对你有一定的参考价值。
目录：
- 三个小时vue3.x从零到实战（前）（vue3.x基础）
- 三个小时vue3.x从零到实战（中）（vue3.x高级语法）
- 三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）
- 三个小时vue3.x从零到实战（typescript的搭建、使用及资料）
- 三个小时vue3.x从零到实战（vue3.x经典案例46个）
- 三个小时vue3.x从零到实战（vue3.x面试总结）
一. mixin混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。
Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app"></div>
<script type = "text/javascript">
// 定义混入对象
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
document.write('欢迎来到混入实例')
}
}
}
// 定义一个应用，使用混入
const app = Vue.createApp({
mixins: [myMixin]
})
app.mount('#app') // => "欢迎来到混入实例"
</script>
</body>
</html>
二. ajax
vue 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios
三. 组件化编程
vue文件包含3个部分
<template>
<div></div>
</template>
<script>
export default {
props: []/{}
data(){},
computed: {}
methods: {},
watch: {}
filters: {}
directives: {}
components: {}
}
</script>
<style>
</style>
组件化编码的基本流程
1). 拆分界面, 抽取组件
2). 编写静态组件
3). 编写动态组件
初始化数据, 动态显示初始化界面
实现与用户交互功能
组件通信的5种方式
props
vue的自定义事件
pubsub第三方库
slot
vuex(后面单独讲)
props:
父子组件间通信的基本方式
属性值的2大类型:
一般: 父组件-->子组件
函数: 子组件-->父组件
隔层组件间传递: 必须逐层传递(麻烦)
兄弟组件间: 必须借助父组件(麻烦)
vue自定义事件
子组件与父组件的通信方式
用来取代function props
不适合隔层组件和兄弟组件间的通信
pubsub第三方库(消息订阅与发布)
适合于任何关系的组件间通信
slot
通信是带数据的标签
注意: 标签是在父组件中解析
vuex
多组件共享状态(数据的管理)
组件间的关系也没有限制
功能比pubsub强大, 更适用于vue项目
以上是关于三个小时vue3.x从零到实战（中）（vue3.x高级语法）的主要内容，如果未能解决你的问题，请参考以下文章
三个小时vue3.x从零到实战（vue3.x经典案例46个）
三个小时vue3.x从零到实战（typescript的搭建使用及资料）
三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）