当前位置: 首页 > Web前端 > vue.js

【vue】Vue实例的属性

时间:2023-03-31 18:15:42 vue.js

Vue实例的属性attrsvm.$listeners1vm.$dataVue实例观察到的数据对象。Vue实例代理对其属性的访问,包括当前组件接收的mixin和extend的data2vm.$propsprops对象。Vue实例代理访问其属性3vm.$elVue实例使用的根DOM元素4vm.$refs持有所有DOM元素和组件实例已注册refsDOM访问组件内的ref小于5vm.$options当前Vue实例的初始化选项,可以通过vm.$options访问自定义属性6vm.$root当前组件树的根Vue实例。如果当前实例没有父实例,则该实例将是它自己。7vm.$parentvm.$children返回当前实例的父实例,直接子组件$chidren不保证顺序,也不响应8vm.$slots访问slot分发的内容,无响应返回一个对象,包含slots//父组件的Vnode数组>命名2命名2默认

//子组件9vm.$scopedSlots可以访问作用域插槽,以及默认插槽和命名插槽。返回一个对象,slot是函数形式,返回Vnode数组//subcomponent//父组件命名为2默认{{item}}
如果访问slot3,this.$scopedSlots.slot3()会返回undefined,v-for生成的label有less超过10次访问。vm.$isServerBoolean当前Vue实例是否运行在server服务器渲染(SSR)11vm.$attrs包含在父作用域中不被识别为props的属性绑定当一个组件没有声明任何props时,它包含了所有父作用域的绑定,并将v-bind="$attrs"传递给内部组件//父组件——正常传递数据//子组件——不使用props接收v-bind="$attrs"传下去//孙子组件可以使用props接收祖先组件传过来的数据使用中间层v-bind="$attrs"实现祖孙之间的数据通信。使用inheritAttrs选项来确认是否继承所有父组件的内容。在孩子和孙子中使用vm.$attrs。访问传过来的数据12vm.$listeners包含了父作用域中的v-on事件监听器(.native没有修改),可以将v-on="$listeners"传给内部组件//父组件-普通绑定集一个事件
//子组件不触发事件,通过v-on="$listeners"向下传递//Grandson组件触发事件可以在孙组件中传递数据,在孙组件和孙组件中处理事件使用vm.$listeners访问监听器