调用组件方法 Vue or Uni-app
父组件调用子组件方法
<!--父组件-->
<template>
<!-- 给子组件注册引用信息 父组件通过$refs拿到的是子组件的组件实例对象-->
<div id="chat" @click="hideChatBarComp">{{$route.params.name}}</div>
</template>
<script>
export default {
methods:{
hideChatBarComp(){
//父组件通过$ref获取到子组件的实例对象并调用子组件的hide方法
this.$refs.change.hide();
}
}
}
</script>
<!--子组件-->
<script>
export default {
methods:{
hide(){
this.types = '';
}
}
}
</script>
子组件调用父组件
广播的方式
子组件通过事件触发父组件事件调用
<!--父组件-->
<template>
<div class="page">
<v-child @noticeParent="getNotice"></v-child>
</div>
</template>
<script>
export default {
methods:{
//在监听到noticeParent进行事件处理
getNotice(params){
console.log(params)
}
}
}
</script>
<!--子组件-->
<script>
export default {
methods:{
hide(){
let params = '参数';
//注册noticeParent事件,对外广播,params是需要传输的参数
this.$emit('noticeParent', params)
}
}
}
</script>
vm.$parent
通过vm.$parent拿到父组件实例,进行父组件中的事件/属性的操作
<!--父组件-->
<script>
export default {
methods:{
parentMethod(){
console.log('111')
}
}
}
</script>
<!--子组件-->
<script>
export default {
methods:{
getParentMethod(){
//调用父组件的方法
this.$parent.parentMethod()
}
}
}
</script>
props接收
方法以属性传值的方式直接传给子组件,子组件props接收,设置数据类型function,在需要的地方调用。
在调研,后续补充…
来自:https://www.cnblogs.com/muzs/p/8625635.html
4,714 total views, 6 views today
Revisions
- 2020年2月25日 @ 14:08:43 [当前版本] by Warren
- 2020年2月25日 @ 14:08:43 by Warren
- 2020年2月25日 @ 14:08:41 [自动保存] by Warren
- 2019年11月25日 @ 10:42:38 by Warren
- 2019年11月1日 @ 16:49:18 by Warren
- 2019年11月1日 @ 16:48:49 by Warren
Comments are closed.