Java教程

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

本文主要是介绍计算属性、侦听属性、组件基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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: {
        "组件名": 组件对象
    }
}

组件使用总结:

  1. (创建)封装html+css+vue到独立的.vue文件中

  2. (引入注册)组件文件 => 得到组件配置对象

  3. (使用)当前页面当做标签使用

3.scoped属性

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

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

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

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

4.父向子通信

步骤:

  1. 创建组件components/MyProduct.vue - 复制下面标签

  2. 组件内在props定义变量, 用于接收外部传入的值

  3. 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()

这篇关于计算属性、侦听属性、组件基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!