zoukankan      html  css  js  c++  java
  • Vue 第十章 ref获取Dom

    1、ref获取Dom

    <!--ref除了引用元素之外,还可以引用组件以及组件方法、数据-->
        <h1 ref="h1">哈哈</h1>
    
    引用:this.$refs.h1.innerText

    2、案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--cdn镜像快速导入Vue包-->
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    </head>
    <body>
    <!--ref除了引用元素之外,还可以引用组件以及组件方法、数据-->
    <div id="app">
        <input type="button" value="获取元素" @click="getElement">
    <!--    ref 创建标签-->
        <h1 ref="h1">哈哈</h1>
        <hr>
        <login ref="mylogin"></login>
    </div>
    <script>
    
        var login  ={
            template:'<h1>登陆组件</h1>',
            data(){
                return{
                    msg:'子组件msg'
                }
            },
            methods: {
                show(){
                    console.log("子组件显示")
                }
            }
        }
        //2.创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢迎学习Vue'
            },
            methods:{
    
                getElement(){
                    //通过$refs操作Dom
                    console.log(this.$refs.h1.innerText)
                    console.log(this.$refs.mylogin.msg) //访问子组件数据
                    console.log(this.$refs.mylogin.msg)// ref调用子组件方法
    
    
                }
            },
            components:{
               login
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    shmget() 建立共享内存
    [转]SQL2005 连接问题处理
    [转]工作以后十不要,自勉
    C#学习笔记
    一位软件工程师6年总结(转)
    时间相关处理
    Litter Tips
    [转] VS打开解决方案时报错的处理方法
    面向对象—设计模式
    SQL Server 2000中的错误
  • 原文地址:https://www.cnblogs.com/ywjfx/p/12559580.html
Copyright © 2011-2022 走看看