vue 父组件操作删除子组件数据的方法

需求: 父组件有个select下拉框,change改变值的时候要清除子组件里面的值
在组件上定义ref可以调用组件里面的方法

// 父组件代码
<template>
    <cascader ref='homeDel' @addressData='addressData'></cascader>
</template>
<script>
   import {cascader} form '@/components/common/'    // 引入组件
   export default {
       name:'cardPro',
       components: { cascader } //组件
       data () {
          return {}
        },
      created () {},
      methods: {
         addrDel () {
           this.$refs['homeDel'].addrDel()  // 通过ref调用子组件里面的方法清除代码缓存
         },
         addressData (val) {
           console.log('子组件的值', val)
         }
      }
   }
</script>

this.$refs[‘homeDel’].addrDel() // 通过ref调用子组件里面的方法清除代码缓存

// 子组件代码
<template>
   <div>
     <Form :label-width='80'  inline>
       <FormItem label='选择地区'>
          <input  v-model='selectPro'/>
          <input  v-model='selectCity'/>
          <input  v-model='selectDis'/>
       </FormItem>
     </Form>
   </div>
</template>
<script>
   export default {
       props: {  // 接收父组件的传值
         
       }
       data () {
          return {
            selectPro: '',
            selectCity: '',
            selectDis: ''
          }
        },
      created () {},
      methods: {
         addrDel () {
           this.selectPro = ''
           this.selectCity = ''
           this.selectDis = ''

           // 传值给父组件
           // let list = {}
           // this.$emit('addressData', list)
         }
      }
   }
</script>