VUE中父组件如何调用子组件的方法

简介: VUE中父组件如何调用子组件的方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站点击跳转浏览。


   一般的话,如果要调用子组件中的方法,一般用watch一个父组件传递给子组件的一个值这样来进行观测,一般不会用下面这两种方式不过不得已,也要用


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


//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
<script>
import Child from './child';
export default {
    methods: {
        handleClick() {
              this.$refs.child.sing();
        },
    },
}
</script>
//子组件中
<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    sing() {
      console.log('我是子组件的方法');
    },
  },
};
</script>


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


//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
<script>
import Child from './child';
export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子组件$on中的名字
        },
    },
}
</script>
//子组件中
<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>


结语


🔥一个人可以掌握知识,但只有与他人交流才能形成智慧。

🔥One person can acquire knowledge, but wisdom is formed only in the exchange with others.

🏆 我坚信人与人之间的差距是表面上是财富的差距,本质上是大脑中认知的差距,

我们下期再见。

相关文章
|
12月前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
12月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
585 1
|
12月前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
126 0
|
12月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
456 0
|
12月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
610 0
Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module   第一步:你要想改动父组件的值,你父组件得先有值让你改吧!所以,   在父组件定义值:     第二步:同样...
1240 0
|
13天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
122 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
557 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
545 77

热门文章

最新文章