Vue：原生DOM元素的獲取

Vue獲取標簽的方式（ref）

1、給標簽或組件添加 ref 屬性，在mounted()方法中，通過$.refs獲取

<div ref="alex"></div>
<p ref="a"></p>
<Home ref="b"></Home>


this.$refs.alex    獲取原始的DOM對象
this.$refs.a
this.$refs.b       獲取組件實例化對象

2、舉例

<div id="app">

</div>

<script src="../vue.js"></script>
<script>
    Vue.component('Test', {
        data() {
            return {}
        },
        template: `
            <div>我是test</div>
            `,
    });

    let App = {

        data() {
            return {}
        },
        template: `
            <div>
                <input type="text" ref = 'input'>
                <Test ref = 'abc'></Test>
            </div>
            `,
        mounted() {
　　　　　　　//DOM渲染之后調用
            console.log(this.$refs.input);//獲取原始DOM
            this.$refs.input.focus(); //設置焦點
 console.log(this.$refs.abc); //獲取組件實例對象

 console.log(this.$refs.abc.$parent); //獲取父組件

 console.log(this.$refs.abc.$root);//獲取根vue實例

 console.log(this.$children[0]); //子組件的第一個，根據template中加載子組件的順序排序
        }
    };

    let vm = new Vue({

        el: '#app',
        data() {
            return {}
        },
        template: `<App></App>`,
        components: {
            App
        }
    })
</script>