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>