zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【arc068E】Snuke Line
    Subseq
    【agc004F】Namori
    Yura
    【agc008F】Black Radius
    【arc080F】Prime Flip
    【arc075F】Mirrored
    【arc074E】RGB Sequence
    【bzoj3669】魔法森林
    【bzoj2500】幸福的道路
  • 原文地址:https://www.cnblogs.com/feixiangdecainiao/p/10846081.html
Copyright © 2011-2022 走看看