Vue父组件主动获取子组件的值和方法

在父组件使用子组件的代码中，为子组件加上ref="name(自己设置一个名称)"
然后在代码中：

this.$refs.name(你设置的名字).data	//获取子组件data中的数据
this.$refs.name(你设置的名字).method()	//获取子组件中method中的方法

!!!注意：如果父组件以循环的方式生成子组件，如：

<component ref="getParameters"
           		  v-for="(item, index) in layers"
                  :is="item.name"
                  :key="index"
              ></component>

则this.$refs.name(你设置的名字)将会是一个VueComponent数组，这时候可以先获取数组的长度，再依次遍历：

for(let i=0; i<this.$refs.name(你设置的名字).length; i++){
	this.$refs[i].name(你设置的名字).method()
	console.log(this.$refs[i].name(你设置的名字).data)
}

例子：
父组件代码：

<template>
  <div>
  	<my_component ref="child_component"></my_component>
  </div>
</template>

<script>
import child_component from "./child_component"
export default {
  data: () => ({}),
  components:{
        'my_component':child_component
    },
  methods:{
  	get_data_from_child_component(){
  		this.$refs.child_component.whatever()	//父组件调用子组件的方法
  		console.log(this.$refs.child_component.msg)	//父组件调用子组件的值
  	}
  },
  mounted(){
  	this.get_data_from_child_component()
  },
};
</script>

子组件代码：

<template>
  <div></div>
</template>

<script>
export default {
  data: () => ({
  	msg:"这是子组件的值",
  }),
  methods:{
  	whatever(){
  		alert("这是子组件的方法")
  	}
  }
};
</script>