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属性的实例

 

 

 

$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 }

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

 

 

 

如果一个页面中有多个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>

 

 

 

 

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

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

 

 

 

 

 

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

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

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

 

 

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

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

 

 我们试一下

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

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

 

 

posted @ 2021-09-16 14:58  keyeking  阅读(837)  评论(0)  编辑  收藏  举报