VUE——父组件获取子组件的数据

refs访问组件实例

• 父组件是行为主体，父组件主动获取子组件数据
• 子组件通过方法公开只读数据

代码实例

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    name: "ParentComponent",
    components: {ChildComponent},
    methods: {
      submit () {
        // 通过方法获取数据
        let childData = this.$refs.child.getData()
        console.log(childData)
        // 通过属性获取数据
        let arrData = this.$refs.child.arr
        console.log(arrData)
      }
    }
  }
</script>

// ChildComponent.vue
<script>
  export default {
    name: "ChildComponent",
    data(){
    	return{
    		arr: ['1', 'a']
    	}
    }
    methods: {
      getData () {
       // return "Data from Child"
        return this.arr
      }
    }
  }
</script>