vue 父组件修改子组件

<template>       <div class="action-group">

            <el-button size="small" @click="changeTest">自定义</el-button>
          </div>  

 <div>
  <self-column ref="self-column" ></self-column>
</div>
</template>

//局部注册组件
  import selfColumn from '@/components/column/self-column'

export default {

components: { 'self-column': selfColumn, }, 

methods:{ 
　　　　changeTest() { //父组件修改子组件的show值 
　　　　this.$refs['self-column'].show = true;
　　　　//调用子组件中的方法loadInitData
       this.$refs['self-column'].loadInitData();
      },
},
}

父组件页面上使用 <self-column ref="self-column" ></self-column> 渲染子组件的页面，在方法中使用 this.$refs['self-column'].show = true; 和 this.$refs['self-column'].loadInitData(); 可以调用子组件的值和方法

 

转载于:https://www.cnblogs.com/GGboy-wu/p/10481457.html