9.vue2.x之vue2.x的实例属性

vue2.x之vue2.x的实例属性

vm.$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

console.log(this.attrs)
console.log(this.$data.attrs)//两种方式均可访问到数据

vm.$props

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

...
props:['attrs']
...
console.log(this.attrs)//可访问到props接受的数据

vm.$el

Vue 实例使用的根 DOM 元素。

new Vue({
       
        el:"#app", 
        }）

与vm.$root 的区别：
el 是当前组件的跟实例
root 是整个组件树的根实例

vm.$options

用于当前 Vue 实例的初始化选项。在选项中自定义属性可以避免全局污染。

new Vue({
   customAttrs: 'val',//自定义属性
	created(){
	console.log(this.$options.customAttrs)//val
}
})

vm.$parent

当前实例的父实例。

vm.$root

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

vm.$children

当前实例的直接子组件。

vm.$slots

用来访问被插槽分发的内容。

...
//parent-componet
<my-component>
	<template v-slot:foo></template>//具名插槽，缩写为#foo
	<template v-slot:default></template>//匿名插槽，缩写为#default 
	<template v-slot:{changeableName}></template>/