2021-07-22

component组件需要两个参数,一个是组件名,一个是配置选项不在new vue里写的话就是可以全局调用的使用vue.component定义,
第一个参数是组件名,第
二个参数是{}里面template关键字里写一个常规数据或者html语句如果是定义一个局部组件在new vue里的component关键字里定义,可以是自
定义组件名,组件名,看之后的value里是组件实现的功在全局组件里,可以在
prop关键字里以列表的形式定义自定义组件的一项属性(相当于一个变量)方便父组件传递数据给自定义组件处理,比如给定义了一个叫A的组件,里面定义一个b变量可以在div数据块里使用<A:b=“uuu”>调用组件并传入b属性value进行处理自定义组件的属性的绑定也是使用v-bin:实现属性动态监控实际上v-model=某个变量的用法是实现与new vue里的数据双向同步的功能,v-bind:是能使得某个属性可以监听vue里变量的实际变化,让实际value先vue里找变量值,不加v-bind的属性value默认只是一个数据串
v-bind:只能获取不能改变vue和数据块里的变量数据可以在vue里定义一个有字典元素的列表,v-for=‘i in list’可以逐个获得列表元素,之后可以吧i传入自定义自山脉自己定义的变量(属性)里可以定义props属性之后再props属性里定义多个prop关键字如propA,propB再prop里可以使用type:String/Number等定义可能的类型,default定义默认值,required:true表示是一个必须赋值的属性,也可以使用return吧属性值返回给父组件default里的默认值也可以使用function处理后得到就是组件本身可以有多个prop开头的属性,之后属性里还可有多个子属性[‘success’, ‘warning’, ‘danger’].indexOf(value) !== -1实际上indexof方法负责也列表里的匹配,一个都匹
配不上会返回-1定义类型时,null或undefined会通过所有类型不匹配prop验证失败
的时候vue会产生控制台警告父组件使用prop传递数据给自定义组件,子组件吧
数据传递给父组件的话需要使用一个自定义事件父组件可以使用v-on绑定
这个自定义事件,每一个vue实力都是实现了事件的接口的
使用 o n ( 事 件 名 ) 可 以 监 听 这 个 事 件 , 使 用 on(事件名)可以监听这个事件,使用 on使emit(事件名)可以触发该事件
v-on:click=里负责监click事件触发某个方法事实上可以在不定义prop的情况下向组件传入一个prop变量,这个变量设置为一个事件方法,组件是可以直接使用这个变量的
,可以在组件里定义一个method之后使用this. e m i t ( p r o p ) 触 发 这 个 属 性 里 定 义 的 另 一 个 v u e 事 件 监 听 v u e 自 带 的 一 些 原 生 事 件 可 以 加 . n a t i v e v − o n : c l i c k . n a t i v e = " " 如 果 自 定 义 组 件 里 面 返 回 的 数 据 是 一 个 函 数 可 以 保 证 每 一 个 实 例 可 以 维 护 一 个 被 返 回 对 象 的 独 立 拷 贝 , 不 直 接 操 作 数 据 , 如 果 返 回 的 是 另 一 个 变 量 会 可 能 冲 突 可 以 使 用 v a r 变 量 名 = 定 义 一 个 数 据 块 自 定 义 一 个 按 钮 组 件 , 操 作 的 是 数 据 函 数 里 的 变 量 时 , 因 为 每 个 组 件 实 例 之 间 都 会 是 一 份 拷 贝 , 所 以 每 个 按 钮 之 间 的 数 据 不 会 相 互 影 响 自 定 义 组 件 的 v − m o d e l 想 要 使 用 需 要 在 p r o p 里 定 义 一 个 v a l u e 变 量 t e m p l a t e 的 实 际 数 据 可 以 使 用 : v a l u e = “ v a l u e ” @ i n p u t = " emit(prop)触发这个属性里定义的另一个vue事件监听vue自带的一些原生事件可以加.nativev-on:click.native=""如果自定义组件里面返回的数据是一个函数可以保证每一个实例可以维护一个被返回对象的独立拷贝 ,不直接操作数据,如果返回的是另一个变量会可能冲突可以使用var 变量名={}定义一个数据块自定义一个按钮组件,操作的是数据函数里的变量时,因为每个组件实例之 间都会是一份拷贝,所以每个按钮之间的数据不会相互影响自定义组件的v-model想要使用需要在prop里定义一个value变量template的实际数据可以使用:value=“value” @input=" emit(prop)vuevue.nativevon:click.native=""使var=vmodel使propvaluetemplate使value=value@input="emit(‘input’, e v e n t . t a r g e t . v a l u e ) 实 际 上 是 触 发 一 个 使 用 event.target.value)实际上是触发一个使用 event.target.value)使event.target.value监听input的value的事件@input是输入值一发生变化就触发
在react和vue里都可以使用ref操作dom
ref被用于给元素或子组件注册引用信息,引用信息会注册在父组件的$refs对象上
在普通的dom元素上使用引用指向的是dom元素,子组件上引用指向组件实例

ref本身是作为渲染结果被创建,所以出事渲染时不能访问,$refs也不是响应式的,不可以在模板里做数据绑定

ref被用于给元素或子组件注册引用信息,引用信息会被注册到父组件的 r e f s 对 象 上 ¥ r e f s 是 所 有 注 册 过 r e f 的 一 个 集 合 可 以 使 用 t h i s . refs对象上 ¥refs是所有注册过ref的一个集合 可以使用this. refsrefsref使this.refs.引用信息名 打印读取该引用信息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值