vue2.0中的ref.html

前置知识请戳这里

 

获取DOM对象以及组件对象

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
        <button @click="getdom">获取DOM对象</button>
        <div ref="mydiv" id="box">hello vue</div>
        
        <button @click="getcom">获取组件对象</button>
        <login ref="mycom"></login>
    </div>
        
    <script>
      new Vue({
        el: '#app',
        methods:{
            getdom:function(){
                //获取id=box的div对象
                //1、通过传统的document
                console.log(document.getElementById('box').innerHTML);
                
                //2、vue2.0的写法
                console.log(this.$refs.mydiv.innerHTML);
            },
            getcom:function(){
                console.log(this.$refs.mycom.subname);
            }
        },
        components:{
            'login':{
                data:function(){
                    return {
                        subname:"子组件的名称"
                    }
                },
                template:"<h3>这是一个子组件</h3>"
            }
        }
      });
    </script>
  </body>
</html>
复制代码

 

posted @   Z皓  阅读(2817)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手