Vue子组件调用父组件方法案例详解

一、直接在子组件中通过this.$parent.event来调用父组件的方法

<!-- 父组件 -->
<template>
	<div>
		<child></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('测试');
		}
	}
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

二、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

<!-- 父组件 -->
<template>
	<div>
		<child @fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('测试');
		}
	}
};
</script>

<!-- 子组件 -->
<template>
	<div>
		<button @click="childMethod()">点击</button>
	</div>
</template>
<script>
export default {
	methods: {
		childMethod () {
			this.$emit('fatherMethod');
		}
	}
};
</script>

三、父组件把方法传入子组件中，在子组件里直接调用这个方法

<!-- 父组件 -->
<template>
	<div>
		<child :fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('测试');
		}
	}
};
</script>

<!-- 子组件 -->
<template>
	<div>
		<button @click="childMethod()">点击</button>
	</div>
</template>
<script>
export default {
	props: {
		fatherMethod: {
			type: Function,
			default: null
		}
	},
	methods: {
		childMethod () {
			if (this.fatherMethod) {
				this.fatherMethod();
			}
		}
	}
};
</script>

到此这篇关于Vue子组件调用父组件方法案例详解的文章就介绍到这了,更多相关Vue子组件调用父组件方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用Vue3实现一个可以用js调用的组件

    利用Vue3实现一个可以用js调用的组件

    目录 前言 一.常规Vue组件 1. 组件主要代码: 2. 使用方式 3. 实现效果 二.改为js调用组件 1. 实现步骤: 2. 具体实现代码: 3. 实现效果展示 总结 前言 项目开发中基本都会用到组件库,但是设计稿样式和功能不一定和组件库相同,尤其像是消息提示弹窗.确认弹窗,各个项目各个设计师都有自己的一套风格.虽然我们可以使用组件库中的组件对其进行样式覆盖来使用.但是一些定制功能还是不容易修改,这种情况我们就会选择自定义组件,然后通过 components 属性引入页面,显式写入标签调用

  • vue父子组件的互相传值和调用

    1.父传值给子组件 父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child from './child' export default { components: { child }, d

  • vue之封装多个组件调用同一接口的案例

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • 详解Vue组件插槽的使用以及调用组件内的方法

    组件传参 通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default { props: ['options'], data(){ return {} } } 但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message'] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽 slot的使用就像

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • Java子线程调用RequestContextHolder.getRequestAttributes()方法问题详解

    Java子线程调用RequestContextHolder.getRequestAttributes()方法问题详解

    相信很多开发过程中都用过RequestContextHolder.getRequestAttributes(),没错,我也经常用,但今天出现了问题,获取到的实例是空的 原因是因为我新开了一个子线程,在子线程调用了RequestContextHolder.getRequestAttributes().实际获取到的是空的 然后查看了源码 ThreadLocal获取.一个请求到达容器后,Spring会把该请求Request实例通过setRequestAttributes方法 把Request实例放入该

  • Vue的route-view子页面调用父页面的函数详解

    Vue的route-view子页面调用父页面的函数详解

    目录 route-view子页面调用父页面函数 router-view解释 下面就一一来解释一下 命令视图:通常用在同时显示多个视图 route-view子页面调用父页面函数 最近写项目的时候,有一个模块需要刷新父页面最新后台数据,然后再进行操作,查询很多资料搞不懂怎么调用的,现在解决了,做个记录 vue版本为2.6 父页面template代码 <router-view  v-on:getUser="getUser" :infoArray="infoArray"

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • Vue中子组件调用父组件的3种方法实例

    目录 1.直接在子组件中通过“this.$parent.event”来调用父组件的方法. 2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可. 3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可. 总结 Vue中子组件调用父组件的三种方法: 1.直接在子组件中通过“this.$parent.event”来调用父组件的方法. 父组件 <template> <div> <child></child> </div> <

  • ES6下子组件调用父组件的方法(推荐)

    出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题. 这个问题我百度了很久,JS的ES6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错. 因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同. es5的语法下,方法的this都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的.. 具体的写法就是在constructor中添加 this.xxxxx = this.

  • vue父组件触发事件改变子组件的值的方法实例详解

    父组件向子组件通信 业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作 后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-

  • Vue之vue-tree-color组件实现组织架构图案例详解

    Vue之vue-tree-color组件实现组织架构图案例详解

    目录 npm 安装loader Import Plugins 开始 排列方式 折叠展示 点击节点 其他功能 npm # use npm npm install vue-tree-color 安装loader npm install --save-dev less less-loader Import Plugins import Vue from 'vue' import Vue2OrgTree from 'vue-tree-color' Vue.use(Vue2OrgTree) 开始 因为已经

  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') c

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • C# InitializeComponent()方法案例详解

    在每一个窗体生成的时候,都会针对于当前的窗体定义InitializeComponent()方法,该方法实际上是由系统生成的对于窗体界面的定义方法. //位于.cs文件之中的InitializeComponent()方法 public Form011() { InitializeComponent(); } 在每一个Form文件建立后,都会同时产生程序代码文件.CS文件,以及与之相匹配的.Designer.CS文件,业务逻辑以及事件方法等被编写在.CS文件之中,而界面设计规则被封装在.Design

随机推荐