心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

vue实例属性-$refs和$el

发布时间：2022-07-06 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue实例属性-$refs和$el，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

关于$refs的官方介绍 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例

关于$el的官方介绍

Vue 实例使用的根 DOM 元素

我们自己新建组件的时候，如何让父组件直接触发子组件的方法，比如父组件让子组件的数据加1

父组件

 1 <template>
 2   <div>
 3       <div class="parent">
 4       父组件
 5       <button @click="add">父组件按钮让子组件加一</button>
 6       <Child ref="addChild"></Child>
 7       </div>
 8   </div>
 9 </template>
10 
11 <script>
12 import Child From './components/Child.vue'
13 
14   export default {
15     components:{
16       Child
17     },
18     methods:{
19       add(){
20         console.LOG(this.$refs.addChild)
21         this.$refs.addChild.add()
22       }
23     }
24   }
25 </script>
26 
27 <style  scoPEd>
28 .parent{
29   width: 200px;
30   height: 300px;
31   padding: 0 50px;
32   background: blue;
33   color: whITe;
34 }
35 </style>

子组件

 1 <template>
 2     <div>
 3         <div class="child">
 4         子组件数据{{a}}
 5 
 6         </div>
 7     </div>
 8 </template>
 9 
10 <script>
11     export default {  
12         data(){
13             return{
14               a:100
15             }
16         },
17         PRops:['name'],
18         methods:{
19 add(){
20     console.log(123)
21     this.a++
22 },
23 
24         }
25     }
26 </script>
27 
28 <style scoped>
29 .child{
30     width: 200px;
31     height: 200px;
32     background: orange;
33 }
34 </style>

需要注意的是$refs获取的对象内容就是对应的ref属性的实例

vue实例属性-$refs和$el

&nbsp;

 

 

$refs属性的内容包含了当前组件的所有dom和方法

此时我们在父组件中调用了子组件的add方法

1 methods:{
2   add(){
3     this.$refs.addChild.add()
4   }
5 }

子组件中的方法

1 methods:{
2     add() {
3         console.log(123)
4         this.a++
5     }
6     
7 }

此时我们看到触发了子组件中的方法

vue实例属性-$refs和$el

 

 

 

如果一个页面中有多个ref，此时会返回一个JSON对象，分别代表对应的ref实例

 1 <template>
 2   <div>
 3       <div class="parent">
 4       父组件
 5       <button @click="add">父组件按钮让子组件加一</button>
 6       <Child ref="addChild1"></Child>
 7       <Child ref="addChild2"></Child>
 8 
 9       </div>
10   </div>
11 </template>

 

@H_939_360@

 

 

 

如果ref对象不是一个自定义组件而是一个普通元素，返回的就是该元素本身

1 <div ref="Div">
2 我是div标签
3 </div>
1  methods:{
2       add(){
3         console.log(this.$refs.Div)
4         @H_304_405@// this.$refs.addChild.add()
5       }
6     }

 

 

vue实例属性-$refs和$el

 

 

 

此时思考一个问题，可以通过$refs去修改组件的样式嘛？

1  methods:{
2       add(){
3         console.log(this.$refs.addChild.style)
4         // this.$refs.addChild.add()
5       }
6     }

按时浏览器却返回的是undefined，因为$refs如果是一个组件，就没有style样式属性，我们要想修改对应的组件样式，需要通过$el

vue实例属性-$refs和$el

 

 

1 methods:{
2       add(){
3         console.log(this.$refs.addChild.$el)
4         // this.$refs.addChild.add()
5       }
6     }

此时我们会发现这里返回的是一个根节点

vue实例属性-$refs和$el

 

 我们试一下

1 methods:{
2       add(){
3         console.log(this.$refs.addChild.$el.style="color:red")
4         // this.$refs.addChild.add()
5       }
6     }

此时点记忆下，发现可以用$el来修改对应的组件样式

vue实例属性-$refs和$el

 

 

脚本宝典总结

以上是脚本宝典为你收集整理的vue实例属性-$refs和$el全部内容，希望文章能够帮你解决vue实例属性-$refs和$el所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javaloadloadphppython程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程