Vue 父子组件之间的互相调用方法
2024-09-21 09:51:57
第一种方法
直接在子组件中通过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>
子组件 更简便的写法
<template>
<div>
<button @click="fatherMethod()">点击</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: { }
};
</script>
最新文章
- webservice发布服务：AXIS2及客户端调用
- 使用JUnit4测试Spring
- 一句话在网页右上角加一个精致下拉框：forkme on github
- SqlSever基础 datalength函数 计算前后都有空格的字符串的长度
- Oracle数据库——基本操作
- 重构16-Encapsulate Conditional（封装条件）
- librarynotfoundforlPodsAFNetworking解决放案
- nginx1.8+php5.6.10 服务器编译安装备忘2015-06
- DOM 节点实例操作
- box-shadow阴影详解
- ASP.NET Core2.2+Quartz.Net 实现web定时任务
- JMM以及并发三大特性介绍(包括解决方案)
- [Swift]LeetCode363. 矩形区域不超过 K 的最大数值和 | Max Sum of Rectangle No Larger Than K
- js正则表达式——数字校验
- Android MediaPlayer setDataSource failed
- EditPlus 4.3.2477 中文版已经发布（11月3日更新）
- 实现对sqlite数据库增删改查
- [luoguP4306][JSOI2010]连通数
- Linux_服务器_08_网卡eth1修改为eth0
- percona-toolkit工具使用介绍