首页 > 其他分享 >ref属性

ref属性

时间:2023-02-01 17:58:28浏览次数:37  
标签:School console log DOM 元素 组件 ref 属性

一.用处

1.被用来给元素或子组件注册引用信息;
2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象;
3.使用方式:


<template>
  <div>
    <h1 v-text="msg"  ref="title"></h1>
    <School ref="sch"></School>
    <button ref="btn" @click="showDom">点我输出上方DOM元素</button>
  </div>
</template>
<script>
//引入School组件
import School from './components/School.vue'
export default {
    name:'App',
    data(){
        return{
            msg:'欢迎学习vue!'
        }
    },
    components:{School},
    methods:{
        showDom(){
           
            // console.log(document.getElementById("tit"))  在vue文件内,尽量不使用原生DOM操作
            console.log(this.$refs.title)  //真实DOM元素:元素h1
            console.log(this.$refs.btn)   //真实DOM元素:元素button
            console.log(this)  //输出App组件对象
            console.log(this.$refs.sch)  //组件实例对象:App组件的子组件School对象(vc)
        }
    }
}
</script>
<style>
</style>

输出结果:
image

标签:School,console,log,DOM,元素,组件,ref,属性
From: https://www.cnblogs.com/quliangshyang/p/17083707.html

相关文章

  • css行内元素的line-height属性导致的高度溢出问题。
    <divstyle="line-height:1.12;"><spanstyle="display:inline-block;">此处的文字高度要大于所属的span元素的高度。<span></span></span><div>这里......
  • springdata jpa之ddl-auto配置的属性
    参考:spring-data-jpa自动建表_糖沁的博客-CSDN博客_springdatajpa自动建表springdatajpa之ddl-auto配置的属性-King-DA-博客园(cnblogs.com)......
  • 点击获取Cesium中加载的3DTile模型的属性信息
    1.添加鼠标点击事件//鼠标单击左键事件viewer.screenSpaceEventHandler.setInputAction(functiononMouseClick(click){//自己需要写逻辑的地方......
  • DOM属性操作中CRUD操作
    CRUD操作1.append():父元素将子元素追加到末尾对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾2.prepend():父元素将子元素追加到开头对象1.appen......
  • DOM的通用属性和class属性操作
    DOM的通用属性attr():获取/设置元素的属性removeAttr():删除属性prop():获取/设置元素的属性removeProp():删除属性attr和prop区别:1、如果操作的是元素的固有属性,则......
  • 获取版本的分类属性
    1、获取版本的分类属性publicstaticMultiKeyMapgetClassificationObjectProperties(AppXSessionsession,ItemRevisionitemRev){MultiKeyMapkeyMap=new......
  • CLR Resolve a referenced type
    CLR如何解析引用的类型CLR寻找类型只有三种可能地方相同文件(相同程序集)不同文件,相同程序集不同文件,不同程序集相同文件案例一:以下案例是执行Point_1.exe时,运行到st......
  • JQuery属性选择器和过滤选择器
    JQuery属性选择器属性名称选择器语法:$("A[属性名]")包含指定属性的选择器属性选择器语法:$("A[属性名='值']")包含指定属性等于指定值的选......
  • Js/Jquery 设置获取属性
    <body><divid="tree"data-leaves="47"data-plant-height="2.4m"></div><script>vartree=document.getElementById("tree");console.log('---------js......
  • Python3网络爬虫教程6——cookie & session(cookie的属性,保存及模块的使用)
    Python全栈工程师核心面试300问深入解析(2020版)----全文预览Python全栈工程师核心面试300问深入解析(2020版)----欢迎订阅上接:Python3网络爬虫教程5——ProxyHa......