操作DOM

App.vue

<template>
    <div>
       <!-- 查看DOM元素，在元素上配置属性ref，相同于id -->
        <h1 ref="h1Test">这是什么HTML元素</h1>
        <button @click="check">点击查看ref</button>
        <Student ref="zizujian" id="jiegou"></Student>
    </div>
</template>

<script>
    import Aaa from './components/Student.vue'
    export default {
        name: "App",
        data(){
            return{
                id:456,
                types:'type2'
            }
        },
        methods:{
            check(){
              //调用API $refs可以查看元素
                console.log(this.$refs.h1Test)//结果是：如下
                //<h1>这是什么HTML元素</h1>
                console.log(this.$refs.zizujian)//结果是：如下
                //VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
              // 查看结果是一个组件对象
              console.log(document.getElementById('jiegou'))//结果是：如下
              // <div>这是一个组件，Student组件</div>
              // id查看的是子组件的HTML结构
            }
        },
        components:{
            Student:Aaa
        }
    }
</script>

Student.vue

<template>
  <div>这是一个组件，Student组件</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

• 打标识方式<xxx ref="名字"> 获取方式this.$refs.名字
  可以完整的获取到整个实例组件，方便组件间通信