Vue中获取DOM元素

<div id="app">
        <input type="button" value="获取元素" @click="getElement">
        <h3 ref="myh3">今天天气真好啊</h3>
    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data: {

            },
            methods: {
                getElement(){
                    console.log(this.$refs.myh3.innerText)
                }    
            },
        })
    </script>

还可以直接获取组件中的数据和方法，直接调用

<div id="app">
        <input type="button" value="获取元素" @click="getElement" ref="button">
        <h3 ref="myh3">今天天气真好啊</h3>
        <hr>
        <login ref="mylogin"></login>
    </div>
    <script>

        var login={
            template:'<h1>登录组件</h1>',
            data(){
                return {
                    msg: 'son msg'
                }
            },
            methods: {
                show(){
                    console.log("调用了子组件中的方法")
                }
            },

        }

        var vm = new Vue({
            el:'#app',
            data: {

            },
            methods: {
                getElement(){
                    // console.log(this.$refs.myh3.innerText)
                    // console.log(this.$refs.button.innerText)
                    alert(this.$refs.mylogin.msg)
                    this.$refs.mylogin.show()
                }    
            },
            components:{
                login
            }
        })
    </script>

注意组件命名规则，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。上面代码案例中，我的组件名叫login ，所以是符合要求的。