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

父组件通过 props 向下传递数据给子组件，子组件通过 $emit触发events 给父组件发送消息。

尽管存在 props 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件，这就需要使用ref特性，通过 ref 特性为这个子组件赋予一个 ID 引用。

ref：用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

ref的3种使用场景：

1. ref 加在普通的元素上，用this.$refs.name 获取到的是dom元素。
2. ref 加在子组件上，在父组件中用this.$refs.name 获取到的是组件实例，可以调用组件的所有属性和方法。
3. ref和v-for一起使用，用this.$refs.name获取到的将会是一个包含了对应数据源的这些子组件或者DOM元素的数组。

1. ref 加在普通的元素上。

<div id="app">
  <input ref="input">
  <button @click="get">获取input这个DOM元素</button>
</div>
var app=new Vue({
  el:"#app",
  data:{
 
  },
  methods:{
    get:function(){
      console.log(this.$refs.input);
    }
  }
})

2. ref 加在子组件上，在父组件中引用。

<div id="app">
  <child-component ref="child"></child-component>
  <button @click="get">获取子组件</button>
</div>
Vue.component('childComponent',{
   template:"<div>我是子组件</div>"
 })
var app=new Vue({
   el:"#app",
   data:{
 
   },
   methods:{
     get:function(){
       console.log(this.$refs.child);
     }
   }
})

总结：

父组件调用子组件或DOM元素的属性和方法：

this.$refs.refName.属性
this.$refs.refName.方法

子组件或DOM元素调用父组件的属性或方法：

this.$parent.属性
this.$parent.方法