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>//动态命名的插槽
//注：1.之前的slot=“slotName”，以及作用域插槽slot-scope="scope"已经废弃。
//2.v-slot： v-slot can only be used on components or < template >。而废弃的slot=“slotName”则可以写在html元素上面
</my-component>
...

	//parent-component
	<div>
	<slot name=“foo”></slot>//this.$slots.foo
	<slot></slot>//this.$slots.default
	
	</div>

vm.$scopedSlots

作用域插槽现象的理解：子组件将数据渲染控制权交给父组件。
看官方文档中以下这句话让我眼前一亮：

所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

<!--父组件-->
    <my-componnents>
      <template v-slot:test="props">
            {{props.testData.nickName}}
      </template>
      <div>defaultSlot</div>
      <div slot="test1">具名插槽test1</div>
      <!-- 以下会报错 ,v-slot can only be used on components or < template >-->
      <!-- <div v-slot:test>1111111</div> -->
       <template v-slot:test>不带作用域的具名插槽test</template>
    </my-componnents>

<!--子组件组件-->
        <slot name="test" :testData="testData">
            {{testData.name}}
        </slot>
        <slot name="test1"></slot>
        <slot name="test1"></slot>
        <slot></slot>
        <script>
        data(){
	return{
            testData:{
                name:1234,
                nickName:123
            }		
},
mounted(){
	console.log(this.$scopedSlots,1111111111);
}
}
        </script>

页面中

总结：渲染优先级：不带作用域的具名插槽>带作用域域的具名插槽>子组件自身

控制台打印结果

应验了官方给出的解释：所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中，不论当前插槽是否带有作用域。

vm.$refs

一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。

<div ref="div">123</div>

...
mounted(){
	console.log(this.$refs.div)//<div>123</div>
}

还可以拿到组件的数据，和方法。
例如官方给出的父组件控制子组件中input的focus例子。

vm.$isServer

当前 Vue 实例是否运行于服务器。

vm.$attrs

可以拿到不被作为props的特性绑定(class和style除外)。常和inheritAttrs搭配使用。可以通过 v-bind="$attrs"将所有未被注册成props的特性传递下去。

vm.$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners"传入内部组件——在创建更高层次的组件时非常有用。应用场景，孙子组件传参给爷爷组件。中间通过在父组件身上绑定v-on="$listeners” 使得爷爷组件身上的自定义事件能够直接让孙子组件$emit,以达到隔代传参的效果。
-写得比较好的例子