JeecgBoot之VUE父子模块间相互调用方法

1.VUE父子模块中子模块调用父模块的方法通过:this.$parent.xxx

注意:
	1.子模块是被导入的模块,子模块用this.$parent.父类方法名调用。
	2.如果报错:this.$parent.xxx is not a function,
		说明父子模块之间还存在其他的模块,相当于本以为是父子,
		结果是爷孙。此时可以用this.$emit('对应方法名'),
		并且建议用this.$emit('对应方法名')

1.1父模块

<template>
  <div>
    <child>某个子模块</child>
  </div>
</template>
<script>
  import Child from '@/demo/child';//导入子模块
  export default {
    components: {
      Child,//注册子模块
    },
    methods: {
      fatherClose() {
        console.log('父模块的关闭方法方法');
      }
    }
  };
</script>

1.2子模块

<template>
  <div>
    <button @click="close()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      close() {
      	//调用父类关闭方法
        this.$parent.fatherClose();
      }
    }
  };
</script>

2.VUE父子模块中子模块调用父模块的方法通过:this.$emit(‘对应方法名’)

注意:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件,通常都用这样的方法

2.1 父模块

<template>
  <div>
  	//@fatherClose="fatherClose()"此处为监听这个方法,与子组件对应
    <child @fatherClose="fatherClose()">某个子模块</child>
  </div>
</template>
<script>
  import Child from '@/demo/child';//导入子模块
  export default {
    components: {
      Child,//注册子模块
    },
    methods: {
      fatherClose() {
        console.log('父模块的关闭方法方法');
      }
    }
  };
</script>

2.2子模块

<template>
  <div>
    <button @click="close()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      close() {
      	//向父组件触发一个方法
        this.$emit('fatherClose')
      }
    }
  };
</script>

3.VUE父子模块中子模块调用父模块的方法通过:把父组件方法传到子组件里:

3.1父模块

<template>
  <div>
  	//:fatherClose="fatherClose()"将方法传递到子组件
    <child :fatherClose="fatherClose()">某个子模块</child>
  </div>
</template>
<script>
  import Child from '@/demo/child';//导入子模块
  export default {
    components: {
      Child,//注册子模块
    },
    methods: {
      fatherClose() {
        console.log('父模块的关闭方法方法');
      }
    }
  };
</script>

3.2子模块

<template>
  <div>
    <button @click="close()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      close() {
      	//调用父组件转递来的方法
      	if (this.fatherClose) {//判断是否存在
          this.fatherClose();
        }
      }
    }
  };
</script>

4.父模块调用子模块方法通过:this.$refs.方法名()

4.1子组件

<template>
  <div>
    <button >点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      close() {
      	console.log('子模块的关闭方法方法');
      }
    }
  };
</script>

4.2父组件

<template>
  <div>
  	//ref="xClose"是在给这个模块取名,用来给this.$refs.名字调用
    <child @click="fatherClose()" ref="xClose">某个子模块</child>
  </div>
</template>
<script>
  import Child from '@/demo/child';//导入子模块
  export default {
    components: {
      Child,//注册子模块
    },
    methods: {
      fatherClose() {
        console.log('调用模块的关闭方法方法');
        this.$refs.xClose.close();
      }
    }
  };
</script>
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页