vue中dom元素和组件的获取

佚名 6年前 (2019-05-10) 随笔 1994人围观抢沙发百度已收录

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>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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

    <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>