一、data
二、props（组件间通信）
1. 父子组件间通信
- 父组件传递给自组件
通过props属性- props的数组用法
数组中的字符串就是attribute的名称
<!-- 父组件 --> <show-message title="哈哈哈" content="我是哈哈哈"></show-message>// 子组件 export default { props: ["title", "content"] }- props的对象语法
对象用法可以对传入的内容限制很多
export default { props: { title: { // type --- 指定传入的attribute的类型 // required --- 制定传入的attribute是否是必传的 // default --- 指定没有传入时，attribute的默认值 type: string, required: true, default: "title" } } }- 非props的attribute
-
当传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为非props的attribute
-
常见的包括class、style、id等属性
-
可以通过$attrs来访问所有的非props的attribute
-
- props的数组用法
- 子组件传递给父组件
通过$emit触发事件
<!-- 父组件 -->
<template>
<counter @addOne="add"></counter>
<template>
<script>
export default {
components: {
Counter
},
methods: {
add() {
this.counter++
}
}
}
</script>
// 子组件
export default {
emits: ["addOne"],
methods: {
increment() {
this.$emit("addOne")
}
}
}
2. 非父子组件间通信
- 事件总线
- 使用全局事件总线要通过第三方库，比如mitt
- mitt的事件
- 事件监听（emit）
- 事件触发（on）
- 事件取消（off）
- Provide/Inject
3. 插槽Slot
- 认识插槽Slot作用
- 通常我们会通过props传递给组件一些数据，让组件来进行展示。但是为了让组件具备更强的通用性，可以使用插槽。
- 插槽的使用过程其实是抽取共性、预留不同；我们会将共同的元素、内容依然在组件内进行封装；同事会将不同的元素使用slot作为占位，让外部决定到底展示什么阳的数据。
- 插槽Slot基本使用
<!-- App.vue --> <template> <div> <my-slot-cpn> <h2>Hello World</h2> <my-button></my-button> </my-slot-cpn> </div> </template><!-- MySlotCpn.vue --> <template> <div> <h2>MySlotCpn start</h2> <slot><slot> <h2>MySlotCpn end</h2> </div> </template> - 剧名插槽Slot使用
<!-- App.vue --> <template> <nav-bar> <template v-slot:left> <button>返回<button> </template> <template v-slot:center> <button>内容<button> </template> <template #:right> <button>登录<button> </template> </nav-bar> </template><!-- NavBar.vue --> <template> <div class="nav-bar"> <div class="left"> <slot name="left">left</slot> </div> <div class="center"> <slot name="center">left</slot> </div> <div class="right"> <slot name="right">left</slot> </div> </div> </template> - 作用域插槽Slot使用
- 父级模版里的所有内容都是在父级作用域中编译的
- 子模板里的所有内容都是在子作用域中编译的
三、components
四、methods
五、computed
1. computed计算属性使用
- 认识计算属性
- 对于任何包含响应式数据的复杂逻辑，都应该使用计算属性
- 计算属性是有缓存的
- 计算属性实现案例
<div id="app"> <h2>{{ fullName }}</h2> <h2>{{ result }}</h2> <h2>{{ reverseMessage }}</h2> </div> <script> const app = Vue.createApp({ data() { return { firstName: "Leo", lastName: "Messi", score: 80, message: "my name is noora" } }, computed: { fullName() { return this.firstName + this.lastName }, result() { return this.score >= 60 ? "及格" : "不及格" }, reverseMessage() { return this.message.split(" ").reverse().join(" ") } } }) app.mount("#app") </script>
2. computed和methods的区别
- computed看起来是一个函数，但是在使用的时候不需要加()
- 计算属性是有缓存的
- 计算属性会依赖于它们的关系进行缓存
- 在数据不发生变化时，计算属性是不需要重新计算的
- 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算
3. computed的set和get
const app = Vue.createApp({
data() {
return {
firstName: "Leo",
lastName: "Messi",
score: 80,
message: "my name is noora"
}
},
computed: {
fullName: {
get() {
return this.firstName + this.lastName
},
set(value) {
const names = value.split(" ")
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
app.mount("#app")
六、watch
1. 侦听器watch的基本使用
- 认识侦听器
- 在代码逻辑中监听某个数据的变化，这个时候需要用侦听器watch
- 侦听器案例
watch: { // 1. 默认有两个参数：newValue/oldValue message(newValue, oldValue) { console.log(newValue, oldValue) }, // 2. 如果是对象类型，那么拿到的是代理对象 info(newValue, oldValue) { console.log(newValue, oldValue) } }
2. 侦听器watch的配置选项
- deep：深度监听
- immediate：第一次渲染直接执行一次
- 案例
watch: { info: { handler(newValue, oldValue) { console.log(newValue, oldValue) }, deep: true, immediate: true } }
3. 侦听器其他写法
- 侦听对象的属性
watch: { "info.name": function(newValue, oldValue) { console.log(newValue, oldValue) } } - $watch
create() { this.$watch("message", (newValue, oldValue) => { console.log(newValue, oldValue) }, { deep: true, immediate: true }) }
七、created
1. 什么是生命周期
- 生物的生命周期是指一个生物体在生命开始到结束周而复始所经历的一系列变化过程
- 每个组件都可能会经历创建、挂载、更新、卸载等一系列的过程
- Vue给我们提供了组件的生命周期函数使我们可以知道目前组件正在哪一个过程
2. 生命周期函数
- 生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue源码内部进行回调
- 通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段
- 那么我们就可以在该生命周期中编写属于自己的逻辑代码
3. 生命周期的流程
八、mixins
1. Mixin的基本使用
2. Mixin的合并规则
- 如果是data函数的返回值对象
- 返回值对象默认情况下会进行合并
- 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据
- 如果是生命周期钩子函数
- 生命周期的钩子函数会被合并到数组中，都会被调用
- 值为对象的选择，将会被合并为同一个对象
