vue学习笔记(四)——vue组件基础

一、Vue组件概念, 创建和使用

1.1 组件概念

组件是可复用的 Vue 实例,封装标签,样式和JS代码。
组件化:封装的思想,把页面上 ` 可重用的部分 ` 封装为 ` 组件 `,从而方便项目的开发和维护
一个页面,可以拆分成一个个组件,一个组件就是一个整体,每个组件可以有自己独立的结构样式和行为(html,css和js)
组件是什么?
        可复用的vue实例,封装标签,样式,JS
什么时候封装组件?
        遇到重复标签,可复用的时候
组件好处?
        各自独立,互不影响

1.2 组件-基础使用

每个组件都是一个独立的个体,代码里体现为一个独立的.vue文件
① 创建组件,封装要复用的标签,样式,JS代码
② 注册组件
        全局注册 – main.js中
        
        局部注册 – 某.vue文件内
        
③ 使用组件
        
创建和使用组件步骤?
        创建.vue文件 – 标签 – 样式 – JS进去
        注册组件 (全局 / 局部)
        使用组件 (组件名用作标签)
组件运行结果?
        把组件标签最终替换成,封装的组件内标签

1.3 组件-scoped作用

准备: 当前组件内标签都被添加 data-v-hash值 的属性
获取: css选择器都被添加 [data-v-hash值] 的属性选择器
Vue组件内样式,只针对当前组件内标签生效如何做?
        给style上添加scoped
原理和过程是什么?
        会自动给标签添加data-v-hash值属性,所有选择都 带属性选择

二、Vue组件通信

2.1 组件通信-父传子-props

父组件 -> 子组件传值( 父传子通过属性传递
首先明确父和子是谁, 在父引入子 (被引入的是子)
        父: App.vue
        子: MyProduct.vue
① 子组件内,定义变量,准备接收,然后使用变量
② 父组件(App.vue)内,要展示封装的子组件(MyProduct.vue)
        引入组件,注册组件,使用组件,传值进去          
什么时候需要父传子技术?
        从一个vue组件里把值传给另一个vue组件(父->子)
父传子口诀(步骤)是什么?
        子组件内, props定义变量, 在子组件使用变量
        父组件内, 使用子组件, 属性方式给props变量传值

2.2 组件通信-父向子-配合循环

父组件 -> 子组件 循环使用-传值
每次循环obj和组件都是独立的,新的
循环使用组件注意事项?
        每次循环, 变量和组件, 都是独立的

2.3 单向数据流

从父到子的数据 流向, 叫单向数据流
Vue规定 props 里的 变量 本身 只读
为何不建议,子组件修改父组件传过来的值?
        父子数据不一致,而且子组件是依赖父传入的值
什么是单向数据流?
        从父到子的数据流向,叫单向数据流
props里定义的变量能修改吗?
        不能,props里的变量本身是只读的

2.4 组件通信-子向父-自定义事件

子组件触发父自定义事件方法
① 父组件内,绑定自定义事件和事件处理函数
        语法:@自定义事件名="父methods里函数名"

② 子组件内,恰当的时机,触发父给我绑的自定义事件,导致父methods里事件处理函数执行
什么时候使用子传父技术?
        当子想要去改变父里的数据
子传父如何实现?
        父组件内,给组件@自定义事件="父methods函数"
        子组件内,恰当时机this.$emit('自定义事件名', 值)

2.5 组件通信-EventBus

App.vue里引入MyProduct.vue和List.vue
常用于跨组件通信时使用
语法
① src/EventBus/index.js – 创建空白Vue对象并导出
② 在要接收值的组件(List.vue)         
        eventBus.$on('事件名', 函数体)
③ 在要传递值的组件(MyProduct.vue)         
        eventBus.$emit('事件名', 值)
什么时候使用eventBus技术?
        当2个没有引用关系的组件之间要通信传值
eventBus技术本质是什么?
        空白Vue对象, 只负责$on(接收)和$emit(发射,传递)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值