父组件中调用子组件的方法和属性

Posted 2020-11-09 古兰精

　　方案：利用ref属性可以获取到dom元素或者是子组件，从而可以调用子组件的方法（注意2.0版本用ref取代了el）

1、当ref直接定义在dom元素上时，则通过this.$refs.name可以获取到dom，对dom进行原生的操作

<div class="foods-wrapper" ref="foods-wrapper">

　　通过this.$refs获取到dom进行操作（注意ref属性的命名不能用驼峰，同时获取的时候也不能用）

let menuList = this.$refs[‘menu-wrapper‘].getElementsByClassName(‘menu-list-hook‘);
//此处如果用this.$refs["menuWrapper"]将获取不到元素

2、通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性

　　在父组件中引用子组件并定义ref

<v-food ref="selectfood"></v-food>

　　调用定义在子组件中的方法show

this.$refs.selectfood.show();//同时也可以调用子组件中的属性

　　this.$refs.selectfood，返回的是一个vue对象，所以可以直接调用其方法