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