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(); 可以调用子组件的值和方法

 


posted @ 2019-03-06 09:55  HailHydra  阅读(578)  评论(0编辑  收藏  举报