孙肖宁

Vue中的ref和$.refs
ref和$.refs可以很方便的调用元素,以及组件里面里面的方法是属性<div id="app&q...
扫描右侧二维码阅读全文
02
2018/08

Vue中的ref和$.refs

ref和$.refs可以很方便的调用元素,以及组件里面里面的方法是属性

<div id="app">
    <input type="button" value="获取元素" @click="getElement" ref = "mybtn">

    <h3 id = "myh3" ref = "myh3">我是h3</h3>

    <hr>

    <login ref = "mylogin"></login>

</div>

<script>
    var login = {
        template:'<h1>登录组件</h1>',
        data(){
            return {
                msg:'登录组件的数据'
            }
        },
        methods:{
            show(){
                console.log('login里面的方法')
            }
        }
    }

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

        },
        methods:{
            getElement() {
                //console.log(document.getElementById('myh3').innerText)
                //console.log(this.$refs.myh3.innerText)
                this.$refs.mylogin.show()

            }
        },
        components:{
            login
    }

    })

</script>
Last modification:August 2nd, 2018 at 10:18 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment