本文主要是介绍计算属性、侦听属性、组件基础,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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()
这篇关于计算属性、侦听属性、组件基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!