首页 > 其他分享 >vue父组件中调用子组件中的方法 及vue父组件调用孙子组件的方法

vue父组件中调用子组件中的方法 及vue父组件调用孙子组件的方法

时间:2023-10-20 17:15:36浏览次数:34  
标签:vue default 调用 export child 组件

一:通过ref直接调用子组件的方法;

子组件child.vue

<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    childFun() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

父组件:

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.childFun();
        },
    },
}
</script>

二:通过组件的e m i t 、 emit、emit、on方法;

子组件child.vue:

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childFun', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>

父组件:

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childFun")    //子组件$on中的名字
        },
    },
}
</script>

vue调用孙子组件的方法:

父组件

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    components: {
        Child 
      },
    methods: {
        handleClick() {
               this.$refs.child.$refs.grandson.test() 
        },
    },
}
</script>

子组件

<template>
  <div>我是子组件</div>
  <grandson ref='grandson'></grandson>
</template>
<script>
import grandson from './grandson';
export default {
    components: {
        grandson 
      },
  methods: {
    childFun() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

孙子组件

<template>
  <div></div>
</template>

<script>
export default {
  name: "index",
  methods:{
    test(){
      console.log('孙子组件的方法')
    }
  }

}
</script>

 

————————————————

原文链接:https://blog.csdn.net/Jonn1124/article/details/117478603

标签:vue,default,调用,export,child,组件
From: https://www.cnblogs.com/gwkzb/p/17777527.html

相关文章

  • vue 各种东西的顺序
    props  —》beforeCreate —》methods—》data—》computed—》watch(immediate)—》created beforeCreate会在实例初始化完成、props解析之后、data() 和 computed 等选项处理之前立即调用。 created当这个钩子被调用时,以下内容已经设置完成:响应式数据data、......
  • [转] VSCode中 Vetur插件排版Vue文件 Col 标签子标签不被缩进的问题 iview viewDesign
    [转]VSCode中Vetur插件排版Vue文件Col标签子标签不被缩进的问题iviewviewDesign自动格式化问题Col标签不对齐首先直接放解决办法在vsCodesettings.json中添加{//缩进大小,自行按需配置"vetur.format.options.tabSize":4,"vetur.format.defaultFo......
  • vue学习八
    <divid="app8"><ul><liv-for="(item,index)inlist"style="display:inline;list-style-type:none;margin-left:10px;"@click="indexactive=index">......
  • vue学习七
    <divid="app7"><divstyle="height:80px;width:80px;background-color:aquamarine;"@click="father"><divstyle="height:40px;width:40px;background-color:bisque;"@click=&quo......
  • “SecurityError: Error #2060: 安全沙箱冲突:ExternalInterface 调用者xxx不能访问xx
    今天,我把我的FlashPlayer插件做了一下升级,变为了10.0.42.34的版本。然后发现之前能够在本地正常运行的DVF,今天运行起来却抛出了异常信息。提示信息如下:SecurityError:Error#2060:安全沙箱冲突:ExternalInterface调用者file://D:\study\flex\service\bin\rainbowX.swf......
  • vue扫码功能
    直接写到组件里面,使用组件传值返回数据 <template> <divclass="scan">  <divid="bcid">   <divstyle="height:40%"></div>   <pclass="tip">...载入中...</p>  </div>  <foo......
  • vue3 hooks使用watch监听注意事项
    当我们再vue3写了一个通用hooks的里面使用watch来执行某些操作要注意!!!一个页面只能再根路由去创建实例,也就是调用对呀hooks,如果子路由也需要使用则由根路由provide()子路由inject,如果子路由都创建实例,会造成多次执行监听例如我们由一个useSearch,来写通用搜索逻辑,在该hooks......
  • 如何在Vuex中处理异步操作?
    在Vuex中处理异步操作,可以使用actions来执行异步操作并更新状态。一个处理异步操作的示例:在Vuex的store中定义一个actions对象,其中包含处理异步操作的方法。conststore=newVuex.Store({state:{//状态数据},mutations:{//同步更新状态的方法},acti......
  • 16、实现Client远程调用的重试机制
    由于远程程序服务健壮性和网络的波动等因素,可能造成接口调用失败,因此有必要实现Client远程调用的重试机制一、基于异常捕捉的重试机制:publicStringgetDetailFromClient(){//重试次数intretryCount=3;//重试时长(单位:ms)intretryTi......
  • DevExpress WPF Pivot Grid组件,可轻松实现多维数据分析!(二)
    在上文中(点击这里回顾>>)我们主要为大家介绍了DevExpressWPF PivotGrid组件的超快速枢轴分析功能、Microsoft分析服务等,本文将继续介绍图表透视数据的处理、MVVM支持等。欢迎持续关注我们,探索更多新功能哦~P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需......