vue ts父组件使用ref调用子组件的方法或获取子组件的值

刺骨的言语ヽ痛彻心扉 2022-10-23 11:28 644阅读 0赞

## vue2.0 ts父组件使用ref调用子组件的方法和值 ##

父组件中用ref绑定子组件，然后通过this.$refs.名字就可以获取子组件的值或调用相关方法。  
**父组件**

<template>
      <div>
        <div class="parent">
          <h1>父组件名字:{ { parentName}}</h1>
           <a-button type="primary" size="large" @click="refGetChildValue">
             使用ref调用子组件的值
            </a-button> 
            <div class="ref-function">
            <a-button type="primary" size="large" @click="refGetChildFunction">
             使用ref调用子组件的方法
            </a-button> 
            </div>
        </div>
       
        <Child
          ref="child"
         />
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue } from 'vue-property-decorator';
    import Child from '@/components/Child.vue';
    
    @Component({ 
      components: { 
        Child
      },
    })
    export default class Home extends Vue { 
      parentName:string='父组件'
      childEmitValue:any='';
      //ref获取子组件的值
      refGetChildValue(){ 
        alert(this.$refs.child.childValue);
      }
      //ref调用子组件的方法
      refGetChildFunction(){ 
        this.$refs.child.childFunction();
      }
    }
    </script>

**子组件**

<template>
      <div>
        <div class="child">
          <div>
            <h1>子组件</h1>
           
          </div>
          <div class="search">
            <a-input-search
              placeholder="传值给父组件"
              enter-button="Emit传值给父组件"
              size="large"
              @search="onSearch"
            />
          </div>
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue, Prop,Emit } from "vue-property-decorator";
    
    @Component({ 
      components: { },
    })
    export default class Child extends Vue { 
      childValue:string="在路上,不需此行";
        onSearch(value:any) { 
          console.log(value);
          this.$emit('getChildInput',value);
        }
    
        childFunction(){ 
          alert('我是子组件的方法');
        }
    }
    </script>

**ref获取子组件值效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]**ref调用子组件方法效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20221023/468e7a174dec40e2b10b6d52dc50cbb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70 1]: /images/20221023/09a6a4f68a7c437ba0ef5b8d808d4b70.png