Vue_使用ref獲取DOM元素

• 對html文檔內的標簽添加ref屬性,其值為自定義命名.
• 在vue實例vm中通過調用 this.$refs.自定義命名 來獲取相關的DOM元素.
• 對html文檔中的組件添加該屬性后,可以獲取組件的data或調用組件的methods.

<div id="app">
        <input type="button" value="點擊獲取dom元素以及子組件數據和方法" @click="getElement" ref="mybtn">
        <h3 ref="myh3">這是一個h3</h3>
        <login ref="mylogin"></login>
    </div>

var l = console.log;
        var login = {
            template: '<h1>登錄組件</h1>',
            data() {
                return {
                    msg: 'som msg'
                }
            },
            methods: {
                show() {
                    console.log('這是子組件方法');
                }
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                getElement() {
                    l(this.$refs.myh3.innerText);
                    l(this.$refs.mybtn.value);
                    l(this.$refs.mylogin.msg);
                    l(this.$refs.mylogin.show());
                }
            },
            filters: {},
            directives: {},
            components: {
                login
            },
            watch: {},
            computed: {}
        });