vue 获取组件和 dom 对象 ref/el

程序员艳艳技术 2022年11月21日

0 收藏 405 点赞 4,205 浏览 766 个字

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>v-el 和 v-ref</title>    <link rel="stylesheet" href="./dist/css/bootstrap.css" rel="external nofollow" ></head><body>    <div id="app">            <button @click="getdom">获取dom对象</button>            <div id="div1" ref="mydiv" > hello v-el</div>            <button v-on:click="getcom">获取组件对象</button>            <login ref="mycom"></login>    </div><script src="vue.js"></script><script src="vue-resource1.5.1.js"></script><script type="text/javascript">    new Vue({        el:'#app',        data:{        },        methods:{            getdom(){                //获取到id= div1 的div对象                // console.log(document.getElementById('div1'))  1.0 version                //2.0 version                console.log(this.$refs.mydiv.innerHTML);            },            getcom(){//2.x version 写法                console.log(this.$refs.mycom.subname);            }        },        components:{            'component_name':{            },            'login':{                data(){                    return{                        subname:'子组件名称'                    };                },                template:'<h1>你好</h1>'            }        }    });</script></body></html>