首页 > 其他分享 >Vue ref属性

Vue ref属性

时间:2023-02-25 15:24:54浏览次数:39  
标签:Vue 标签 获取 组件 ref 属性

ref属性

1、被用来给元素或子组件注册引用信息(id的替代者)

2、应用在html标签上获取的是真实DOM元素;

应用在组件标签上是组件实例对象 vc

3、使用方法:

(1)打标识:<h1 ref="XXX"></h1> 或 <School ref="sch"></School>

(2)获取:this.$refs.XXX

案例:

 

控制台输出:

 

 

标签:Vue,标签,获取,组件,ref,属性
From: https://www.cnblogs.com/technicist/p/17154468.html

相关文章

  • vue3兄弟组件传参
    兄弟组件传参数mitt使用方式和vue2的事件大巴类似。安装npmimitt-S新建plugin/Bus.jsimportmittfrom'mitt'cosntemitter=mitt()exportdefaultemitterHome.vue<t......
  • vue3插槽
    父级组件中使用 ​​<A></A>​​并且不提供任何插槽内容时,子组件中 ​​<slot></slot>​​标签中的内容当作默认内容展示。v-slot只能添加在​​<template​​(一种情......
  • vue前端调用有道API进行翻译
    进入有道API  ,注册用户信息并拿到有道翻译的应用ID和应用密钥将ID与秘钥放入代码中vue代码<template><div><divstyle="height:300px;width:100%;">......
  • Teamcenter在BMIDE中,根据对象不同属性,配置显示不同的图标
    1.制作图标:  2.将图标添加到bmide中通过右键,新建“业务对象图标”    3.新建属性渲染器  4.编辑渲染器xml配置<iconsVersion="1.0"> <primaryI......
  • JS 删除对象中的某个属性
    方法1删除是删除对象的属性没有任何剩菜剩下的唯一真正的方法但它的工作比其“替代”设置慢100倍object[key]=undefinedvarmyObject={"ircEvent":"PRIVMSG",......
  • vue.js代码030
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script><st......
  • vue.js代码028
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vue.js代码026
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vue.js代码022
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vue.js代码021
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......