计算属性、侦听属性、组件基础

2023-09-27 20:11:10

1.计算属性

用途：一个数据, 依赖另外一些数据计算而来的结果

语法：

computed:{

"计算属性名" () {
return "值"
}

}

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

优点：有缓存机制，提高性能

2.侦听属性

方法一，使用watch配置属性直接在创建vm对象时定义好
方法二，vm.$watch()

开启深度监视

deep:true

3.组件

1.概念

一个页面，可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的结构样式和行为(html, css和js)

2.基础使用

口诀: 哪部分标签复用, 就把哪部分封装到组件内

(重要): 组件内template只能有一个根标签

(重要): 组件内data必须是一个函数, 独立作用域

步骤：

1）创建组件，即.vue文件

2）注册组件

2.1全局注册

全局入口在main.js，注意要在new出的vue实例前面注册

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

2.2局部注册

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

组件使用总结:

(创建)封装html+css+vue到独立的.vue文件中
(引入注册)组件文件 => 得到组件配置对象
(使用)当前页面当做标签使用

3.scoped属性

目的: 解决多个组件样式名相同, 冲突问题

需求: div标签名选择器, 设置背景色

问题: 发现组件里的div和外面的div都生效了

解决: 给Pannel.vue组件里style标签上加scoped属性即可

4.父向子通信

步骤：

创建组件components/MyProduct.vue - 复制下面标签
组件内在props定义变量, 用于接收外部传入的值
App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

注意：一般配合v-for循环生成

一大问题：单向数据流

子组件修改了数据没法通知父组件，所以会导致数据不一致

原因：prop的值是只读的

5.子向父通信

语法:

父: @自定义事件名="父methods函数"
子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

总结: 父自定义事件和方法, 等待子组件触发事件给方法传值

6.EventBus

两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线

核心语法

EventBus/index.js- 定义事件总线bus对象

import Vue from 'vue'
// 导出空白vue对象
export default new Vue()

码农公寓