-
2019-08-19 22:28:50
思考:
都知道Vue中子组件调用父组件的方法是只要将父组件方法传到子组件用props接收即可使用,可是父组件该怎么调用子组件呢?子组件方法创给父组件根本行不通。
解决思路:
通过用ref对组件进行唯一标识,用this.$refs.标识名 即可调用子组件方法(this.$refs.标识名 返回的是子组件对象)
- 子组件
<template> <div> son components </div> </template> <script> export default { method:{ fn(){ console.log('You clicked the button.') } } } </script> <style lang="stylus" rel="stylesheet/stylus"> </style>
- 父组件
<template> <div> <button @click="fn">Please Click the</button> <SonComponent ref="SON"></SonComponent> </div> </template> <script> import SonComponent from './SonComponent' export default { components:{ SonComponent },methods:{ fn(){ this.$ref.SON.fn() } } } </script> <style lang="stylus" rel="stylesheet/stylus"> </style>
更多相关内容 -
vue 父组件中调用子组件函数的方法
2020-12-11 01:47:38在父组件中调用子组件的方法: 1.给子组件定义一个ref属性。eg:ref="childItem" 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过... -
vue父组件调用子组件方法
2019-08-30 22:24:48子组件 <template> <div> child </div> </template> <script> export default { name: "child", props: "someprops", methods: { parentHandleclick(e) {...子组件
<template> <div> child </div> </template> <script> export default { name: "child", props: "someprops", methods: { parentHandleclick(e) { console.log(e) } } } </script>
父组件
<template> <div> <button @click="clickParent">点击</button> <child ref="mychild"></child> </div> </template> <script> import Child from './child'; export default { name: "parent", components: { child: Child }, methods: { clickParent() { this.$refs.mychild.parentHandleclick("嘿嘿嘿"); } } } </script>
-
vue 父组件调用子组件方法及事件
2021-01-19 18:53:57情景: ... 子组件上定义ref=refName,父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { console.log('子组件的fileClick被调用了') -
Vue子组件向父组件通信与父组件调用子组件中的方法
2020-12-09 02:37:51子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), ...父组件调用子组件中的方法 点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父 -
vue 使用ref 让父组件调用子组件的方法
2020-08-28 01:28:55主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下 -
Vue父组件调用子组件事件方法
2020-11-28 06:40:57方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { ... -
vue父组件中调用子组件的方法
2020-07-16 20:01:07vue父组件中调用子组件的方法 方案一:通过ref直接调用子组件的方法; //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child...vue父组件中调用子组件的方法
方案一:通过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、 emit、on方法;
//父组件中 <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 { mounted() { this.$nextTick(function() { this.$on('childmethods', function() { console.log('我是子组件方法'); }); }); }, }; </script>
zhuanzai https://www.cnblogs.com/yuzhongyu/p/10825824.html
-
vue.js中父组件调用子组件的内部方法示例
2020-10-19 02:12:52主要给大家介绍了关于vue.js中父组件调用子组件内部方法的相关资料,文中给出来了详细的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面随着小编来一起学习学习吧。 -
Vue $emit $refs子父组件间方法的调用实例
2020-10-18 00:53:55今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue 父组件调用子组件的方法
2022-02-15 11:53:46组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了...组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用
is
特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
子组件:
<template> <div> Son </div> </template> <script> export default { methods: { subassembly() { console.log('Hello World') } } } </script>
父组件:
<template> <div> <button @click="click">点击</button> <Son ref="iaSon"></Son> </div> </template> <script> import Son from './son'; export default { components: { Son }, methods: { click() { this.$refs.iaSon.subassembly(); } } } </script>
也是可以传参的
子组件:
<template> <div> Son </div> </template> <script> export default { methods: { subassembly(e) { console.log(e) } } } </script>
父组件:
<template> <div> <button @click="click">点击</button> <Son ref="iaSon"></Son> </div> </template> <script> import Son from './son'; export default { components: { Son }, methods: { click() { this.$refs.iaSon.subassembly('Hello World'); } } } </script>
-
Vue父组件调用子组件的方法
2022-04-19 17:17:18vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click="fatherMethod"> <child ref="child"></... -
vue 父调用子的方法
2018-06-15 10:06:26父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用 <template> <div @click="parentMethod"> <children ref="c1"></children&... -
vue父页面调用子页面方法
2022-02-26 17:05:151、子页面,文件名MapContainer.vue <template> <div class="box"> <div style="position: absolute;z-index: 10;cursor:pointer" @click="animates()"></div> </div> </... -
vue父组件调用子组件中的方法并传入参数
2022-04-19 16:04:181、子组件FrontImg声明name属性 2、父组件中引入子组件 import FrontImg from "@/pages/front/test/FrontImg"; ...3、父组件中添加子组件并...4、父组件中调用子组件方法 this.$refs.FrontImg.子组件方法名(); ... -
vue父组件调用子组件方法报错的解决方法
2021-12-18 09:30:53vue父组件调用子组件方法报错 在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件,如下图所示: 子组件中定义的方法: setup() { const getList = () =>{ const date = moment(new Date()).... -
vue父组件调用子组件父页面的方法
2019-02-15 18:08:35vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click="fatherMethod"> <child ref="child"></child... -
Vue中父组件调用子组件的方法
2021-11-26 14:08:25场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载...实现在父组件选择时间后调用子组件的方法重新渲染柱状图。 注: 博客:BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博 -
Vue的父组件调用子组件方法
2021-01-12 10:35:57没想到第一篇要分享的竟然是前端的内容,在进入项目组之前我所会的只是一些原生的html、js,目前前台最流行的两大框架Vue和React基本没接触过,正式接过来需求之后,因为研发项目组前端人员紧张,我就不得不硬着头皮... -
vue中子组件调用兄弟组件方法
2020-08-27 05:42:49主要介绍了vue中子组件调用兄弟组件方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧