Vue实例（包含$refs）

1、this
在option api上通过this即可访问Vue实例对象

2、$root
获取当前组件的根节点

3、$parent
获取当前组件的父组件（Vue3中已经被弃用）

4、$children
获取当前组件的子组件 获得一个数组（Vue3中已经被弃用）

5、$mount()
$mount(‘选择器’)与el相同都是挂载元素

var app=new Vue({
	data:{
	message:'Hello Vue!'
	}
}).$mount('#app)

6、$el
组件渲染的时候的根节点对象

7、$data
得到组件的data设置的内容

8、$attrs
可以读取所有除了在props当中声明的自定义属性以外传递的自定义属性的值

9、$emit
用于触发绑定的自定义事件

实例作用范围
vue会管理el选项命中元素及其内部的后代元素
el挂载可以使用css选择器，但是不能挂载在html和body上

$refs

• 用于在vue中获取DOM元素或者组件引入
• 每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用
• 默认情况下，组件的$refs指向一个空对象

<!-- 处理边界问题：
              $refs
              $children
              $root
              $parent
   -->
<div id="app">
      <parent ref="a2"></parent>
      <!-- ref 使用在html元素上 那么 this.$refs 可以得到这个html的 element对象    -->
       <div ref="a1"> 456 </div>
       <div ref="a3" v-for="item of 5" :key="item"> {{ item }} </div>
      <button @click="fn1"> 我是app里面的按钮</button>
</div>


<script>
    Vue.component('cp1',{
        template:` <div>
                        我是cp1组件
                        <button @click="fn1">$parent</button>
                        <button @click="fn2">$root</button>
                   </div> `,
        methods:{
            fn1(){
                console.log(this.$parent)
                // 组件内部可以通过 this.$parent 访问父组件实例
                this.$parent.c  = '我是cp1cp1cp1cp1'
            },
            fn2(){
                console.log(this.$root)
            }
        }
    })
    Vue.component('parent',{
        template:` <div>
                        我是parent组件
                        {{ c }}
                        <cp1></cp1>
                        <cp1></cp1>
                        <cp1></cp1>
                        <button @click="fn1"> 我是parent组件的按钮</button>
                   </div> `,
        data(){
            return {
                c:'我是parent里面的文字内容'
            }
        },
        methods: {
            fn2(){
                this.c ='我是组件内fn2修改的内容'
            },
            fn1(){
                // 通过 this.$children 访问所有的子组件实例
                console.log(this.$children)
            }
        }
    })
    new Vue({
        el:'#app',
        methods:{
            fn1(){
                // console.log( this.$refs.a1 )
                console.log( this.$refs.a2 ) //输出为<div>456</div>  vue中获取节点
                //  如果ref是写在自定组件上
                // 那么可以通过this.$refs 来访问组件实例
                // 可以可以修改组件的状态或者调用组件的方法
                // this.$refs.a2.c = '我是在外面修改的内容'
                // this.$refs.a2.fn2()
                // 如果 refs声明在 html元素上面并且有 v-for
                // 那么通过 this.$refs可以得到对应的节点组成的数组
                // console.log(this.$refs.a3)
            }

        }
    })
</script>