Vue

上一篇是说Vue的内置组件,其中的slot使用的是了Vue实例中的属性，那么接下来我们就认识一下，介绍一个Vue
的实例属性

1.$slots $scopedSlots

上次是说这样的一个input组件，我期望在文本后边附加单位，很常见的场景，没有给出具体的实现，那么我们现
在来实现这样的一个组件，可以分发内容

<template>
     <input type="text">
     <span  v-if="$slots.append">
         <slot name="append"></slot>
     </span>
    </template>
    <script>
         //为什么可以直接使用$slots，因为它是绑定在Vue实例上的属性 vm.$slots
         //方便我们拿到我们传递的slot属性
    </script>
    <style>
    </style>

$scopedSlots与之类似，只不过是用来访问作用域slot, $slots可以说更宽泛一些

2.$refs $children $parent $root $el

这五个实例属性，都是与DOM操作相关的，所以把他们放在一起，这样好记忆也好理解

<template id="parent">
     <div>
         <child ref="childOne"></child>
         <child ref="childTwo"></child>
     </div>
    </template>
    <script>
        // 查找 一个人的儿子，一种是直接看他的儿子是谁，另一种是看他的下一辈有中有谁的名字是XXX
        // 就这样，在父组件中访问子组件的DOM，有两种方式，
        this.$child[0] === this.$ref.childOne //true
        this.$child[1] === this.$ref.childTwo //true
        // 相同的，找组件的父元素DOM
        this.$parent
        // 同样的,当前组件树的根
         this.$root
        // 同样的,Vue的根DOM元素
         this.$el
    </script>
    <style>
    </style>

这四个实例主要是用来操作相关的DOM

3.$props $data

$props是组件传入的属性，$data是当前组件使用的初始化数据

<template>
 <my-input :data="someObj">
</template>
<script>
     export default {
         data() {
             this.initializeData = {}
         },
         props:{someObj}
     }
</script>

4.$isServer $options

<script>
     // 判断当前实例是否运行在服务器(比如服务端渲染用到)
    this.$isServer
    // Vue实例的初始化选项
    this.$options
</script>

5.$attrs $listeners

这两个是作为创建更高层次的组件时使用

<script>
     // 父作用域中不作为 prop 被识别 (且获取) 的特性绑定
    this.$attrs
    // 父作用域中的事件监听器
    this.$listeners
 </script>