
先获取父节点: var parentEle=eleparentNode;
在获取父节点的兄弟节点:var parentEle1=parentElepreviousSbiling;//上一个节点
某个子节点:var obj=parentEle1firstChild;//第一个子节点
jQuery也有相应的方法。
组件通信常用方式
props
父给子传值
自定义事件
子给父传值
$emit
$bus事件总线
任意两个组件之间传值常用事件总线 或 vuex的方式。
event bus
vuex
唯一的全局数据管理者store,通过它管理数据并通知组件状态变更。
边界情况
$parent/$root
兄弟组件之间通信可以通过共同祖辈搭桥 $parent 或$root
$children
父组件可以通过$children访问子组件实现父子通信
$refs
获取子节点引用
provide/inject
能够实现祖先和后代之间的传值
$attrs $listeners
非prop特性 ,可以包含所有父作用域的绑定(class style除外)并且可以通过v-bind=“$attrs”传入组件内部,创建高级组件时特别有用
插槽语法是vue实现的内容分发api 适合复合组件开发,在通用组件库的开发中大量使用。
匿名插槽
具名插槽
将内容分发到子组件指定位置
作用域插槽
分发内容到子组件的数据
create函数
建通知组件,Noticevue
ref可以绑定dom节点或字组件,用于获取子组件的方法和属性。但是只有组件 完成渲染 时,才可以获取得到,且$refs也不是响应式的!
响应式处理可以包括以下几种方法:也就是说,在子组件完成渲染以后,动态修改的data或method,在父组件都可以实时获取。
(1)使用nexttick();子组件 同步 更改数据可反映到父组件上,nexttick属于微任务,也就是说,在本轮事件循环完成之前,可以执行异步 *** 作,从而保证实时性。
(2)如果子组件数据更新是异步,比如说从接口请求回来的这种,使用nexttick,甚至settimeout(()=>{},0) 都无法读取到已经修改的data,因为在消息队列里面,异步任务作为宏任务始终排在队尾。常发生的情况是,接口请求的数据还没到,父组件中已经读取了refs[componets]xxx的数据,这会导致这个数据打印出来是undefined。
解决办法是:
>>>settimeout(100ms)的等待,这种方法虽然可以解决,但是非常不好,原因是你无法控制接口要多少秒才能到达响应结果
打印结果:
由此可见 settimeout 0 会在接口响应前执行。
>>> 使用回调的方式。接口响应完,在then里,通过$emit触发父组件获取refs的方法。这种回调必然可以保证数据已经set到,再次手动获取,即可得到响应值。
(3)以上分别用于解决子组件同步和异步的问题,但如果子组件使用v-if(资料发现v-for同样会有这种问题),子组件未被渲染,同样会出现$refs无法读取的问题。暴力解决法是,v-if换成v-show。区别在于:v-show不会发生重拍,只是display:none。这种方式虽然可以保证 $refs获取到子组件的数据,但在某些特定的业务场景下(比如子组件请求必须在父组件完成某 *** 作的时候进行),会导致一些逻辑错误。因此合理的解决办法是,用(2)中回调的方法。
其他解决办法待更新
以上就是关于js取父节点的兄弟节点的某个子元素怎么写全部的内容,包括:js取父节点的兄弟节点的某个子元素怎么写、vue最全的组件通信和插槽,看这一篇就够了、vue获取使用$refs获取自组件方法和属性注意问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)