前端工作总结112-打印出父子组件的this

简介: 前端工作总结112-打印出父子组件的this

父亲的this

VueComponent {_uid: 1842, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$attrs: (...)
$children: (2) [VueComponent, VueComponent]
$createElement: ƒ (a, b, c, d)
$el: div.container
$listeners: (...)
$options: {parent: VueComponent, _parentVnode: VNode, propsData: undefined, _parentListeners: {…}, _renderChildren: undefined, …}
$parent: VueComponent {_uid: 1770, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$refs: {resource: VueComponent, form: VueComponent}
$root: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
$slots: {}
$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
$vnode: VNode {tag: "vue-component-140-edit-content-dialog", data: {…}, children: undefined, text: undefined, elm: div.container, …}
ChangeValuePicture: ƒ ()
ChangeValueVidio: ƒ ()
ChangeVideo: ƒ ()
ContentTitle: (...)
IsShow: (...)
ListId: (...)
ListResource: ƒ ()
add: ƒ ()
appove: ƒ ()
approve: ƒ ()
approveMode: (...)
attr: (...)
cancel: ƒ ()
change1: ƒ ()
changeRest1: ƒ ()
close: ƒ ()
content: ""
defaultForm: Object
dialogFormVisible: true
edit: ƒ ()
arguments: (...)
caller: (...)
length: 1
name: "bound edit"
__proto__: ƒ ()
[[TargetFunction]]: ƒ edit(id)
[[BoundThis]]: VueComponent
[[BoundArgs]]: Array(0)
form: Object
business_module: (...)
content_type: null
department_id: null
id: "120"
resource: "<p><img src="http://xcff.feizhisoft.com/uploads/images/2020-12-05/80b41d49f808d066e8bb52f7c190226e.jpg" style="max-width:100%;"><br></p>"
resource_video_tmp: null
status: "0"
tag: Array(1)
thumbnail: "dfsx://1/504B8CD28A9FD83FA754B8737579A161/504B8CD28A9FD83FA754B8737579A161.png"
thumbnail_tmp: "https://fenfa1.csztv.com/testfile/tmp/504B8CD28A9FD83FA754B8737579A161/504B8CD28A9FD83FA754B8737579A161.png"
title: "312312"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get business_module: ƒ reactiveGetter()
set business_module: ƒ reactiveSetter(newVal)
get content_type: ƒ reactiveGetter()
set content_type: ƒ reactiveSetter(newVal)
get department_id: ƒ reactiveGetter()
set department_id: ƒ reactiveSetter(newVal)
get id: ƒ reactiveGetter()
set id: ƒ reactiveSetter(newVal)
get resource: ƒ reactiveGetter()
set resource: ƒ reactiveSetter(newVal)
get resource_video_tmp: ƒ reactiveGetter()
set resource_video_tmp: ƒ reactiveSetter(newVal)
get status: ƒ reactiveGetter()
set status: ƒ reactiveSetter(newVal)
get tag: ƒ reactiveGetter()
set tag: ƒ reactiveSetter(newVal)
get thumbnail: ƒ reactiveGetter()
set thumbnail: ƒ reactiveSetter(newVal)
get thumbnail_tmp: ƒ reactiveGetter()
set thumbnail_tmp: ƒ reactiveSetter(newVal)
get title: ƒ reactiveGetter()
set title: ƒ reactiveSetter(newVal)
__proto__: Object
fullTitle: (...)
getList: ƒ ()
isClear: (...)
loading: (...)
reject: ƒ ()
show: ƒ ()
submit: ƒ ()
title: (...)
url: (...)
url_list: (...)
view: ƒ ()
viewMode: (...)
_c: ƒ (a, b, c, d)
_computedWatchers: {fullTitle: Watcher}
_data: {…}
_directInactive: false
_events: {ok: Array(1)}
_hasHookEvent: false
_inactive: null
_isBeingDestroyed: false
_isDestroyed: false
_isMounted: true
_isVue: true
_renderProxy: Proxy {_uid: 1842, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_routerRoot: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_self: VueComponent {_uid: 1842, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_staticTrees: null
_uid: 1842
_vnode: VNode {tag: "div", data: {…}, children: Array(2), text: undefined, elm: div.container, …}
_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}
_watchers: (2) [Watcher, Watcher]

儿子的this

$attrs: (...)
$children: (5) [VueComponent, VueComponent, VueComponent, VueComponent, VueComponent]
$createElement: ƒ (a, b, c, d)
$el: div.table-list-page
$listeners: (...)
$options: {parent: VueComponent, _parentVnode: VNode, propsData: undefined, _parentListeners: undefined, _renderChildren: undefined, …}
$parent: VueComponent {_uid: 38, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$refs: {create: VueComponent}
$root: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
$slots: {}
$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
$vnode: VNode {tag: "vue-component-153-Content", data: {…}, children: undefined, text: undefined, elm: div.table-list-page, …}
BindData: (...)
columns: (...)
deleteRecord: ƒ ()
dialogVisible: (...)
handleAdd: ƒ ()
handleAppove: ƒ ()
handleClose: ƒ ()
handleEdit: ƒ ()
handlePublish: ƒ ()
handleView: ƒ ()
list: ƒ ()
loading: (...)
menus: (...)
option1: (...)
options: (...)
pagination: (...)
query: (...)
resetQuery: ƒ ()
tableData: (...)
url: (...)
_c: ƒ (a, b, c, d)
_data: {…}
_directInactive: false
_events: {}
_hasHookEvent: false
_inactive: null
_isBeingDestroyed: false
_isDestroyed: false
_isMounted: true
_isVue: true
_renderProxy: Proxy {_uid: 1770, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_routerRoot: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_self: VueComponent {_uid: 1770, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_staticTrees: null
_uid: 1770
_vnode: VNode {tag: "div", data: {…}, children: Array(3), text: undefined, elm: div.table-list-page, …}
_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}
_watchers: [Watcher]
$data: (...)
$isServer: (...)
$ls: (...)
$props: (...)
$route: (...)
$router: (...)
$ssrContext: (...)
get $attrs: ƒ reactiveGetter()
set $attrs: ƒ reactiveSetter(newVal)
get $listeners: ƒ reactiveGetter()
set $listeners: ƒ reactiveSetter(newVal)
get BindData: ƒ proxyGetter()
set BindData: ƒ proxySetter(val)
get columns: ƒ proxyGetter()
set columns: ƒ proxySetter(val)
get dialogVisible: ƒ proxyGetter()
set dialogVisible: ƒ proxySetter(val)
get loading: ƒ proxyGetter()
set loading: ƒ proxySetter(val)
get menus: ƒ proxyGetter()
set menus: ƒ proxySetter(val)
get option1: ƒ proxyGetter()
set option1: ƒ proxySetter(val)
get options: ƒ proxyGetter()
set options: ƒ proxySetter(val)
get pagination: ƒ proxyGetter()
set pagination: ƒ proxySetter(val)
get query: ƒ proxyGetter()
set query: ƒ proxySetter(val)
get tableData: ƒ proxyGetter()
set tableData: ƒ proxySetter(val)
get url: ƒ proxyGetter()
set url: ƒ proxySetter(val)
__proto__: Vue
相关文章
|
6月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
432 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
7月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
371 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
254 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
218 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
数据采集 前端开发 JavaScript
《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
本文档详细介绍了从零开始搭建一个包含前后端交互的热搜展示项目的全过程。通过本教程,读者不仅能学习到完整的项目开发流程,还能掌握爬虫技术和前后端交互的具体实践。适合有一定编程基础并对项目实战感兴趣的开发者参考。
163 1
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
393 0
|
10月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
547 9
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
10月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
143 1
|
11月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
246 2
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架

热门文章

最新文章