vue中dom元素和组件的获取

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>