tnblog
首页
视频
资源
登录

uni-app 父组件引用子组件时怎么调用子组件的方法

6981人阅读 2021/5/26 19:11 总访问:69731 评论:0 收藏:0 手机
分类: uinapp

1.写一个简单的子组件main/index.vue:

  1. <template>
  2.     <view>
  3.         
  4.     </view>
  5. </template>
  6. <script>
  7.     export default {
  8.         data(){
  9.             return {
  10.                 
  11.             }
  12.         },
  13.         onLoad(){
  14.             
  15.         },
  16.         methods:{
  17.             childMethod() {
  18.                 console.log('childMethod do...')
  19.             }
  20.         }
  21.     }
  22. </script>
  23. <style>
  24. </style>

在子组件中有一个childMethod方法

2.在父组件中引用这个子组件的childMethod方法:

  1. <template>
  2.     <view class="content">
  3.         <mian-index ref="mainindex"></mian-index>
  4.         <view @tap="dataAction">button</view>
  5.     </view>
  6. </template>
  7. <script>
  8.     import mainindex from '@/pages/main/index/index.vue'
  9.     export default {
  10.         data() {
  11.             return {
  12.             };
  13.         },
  14.         components:{
  15.             'mian-index':mainindex
  16.         },
  17.         onLoad(e) {
  18.         },
  19.         methods:{
  20.             dataAction:function(){
  21.                 this.$refs.mainindex.childMethod();
  22.             }
  23.         }
  24.     }
  25. </script>
  26. <style scoped>
  27. .content{
  28.     width:100%;
  29.     box-sizing: border-box;
  30. }
  31. </style>

首先,引入子组件文件,然后用ref给子组件一个id标识,然后通过this.$refs.mainindex.childMethod();调用子组件方法

评价

uni-app开始时间与结束时间(结束时间大于开始时间)picker编写

利用uni-app官网里面picker插件代码当点击开始时间后结束时间要大于选择后的开始时间,点击结束时间后开始时间要小于开始时...

uni-app用法与html标签的变化

以前是html标签,比如,现在是小程序组件,比如。那么标签和组件有什么区别,不都是用尖括号包围起来一段英文吗?其实标签...

uni-app无法导入插件

点击网页中右上角的插件导入,可以打开项目,但是就是无法导入插件。是因为,要登录!hbuilder里边也要登录才行,他这个应...

使用uni-app的云端一体插件

初次使用uni-app的云端一体插件步骤还是有点多,也有一些坑,在这里把使用过程记录一下。 一:先下载需要的插件在插件右上...

uni-app中list插件图标问题

如图:他使用uni-icons实现的如果只有text就不会有图标有时候贴的文档不是太完善,还是要下一个完整的插件来对比一下

uni-app发起请求

代码如下:uni.request({ url:&#39;接口地址&#39;, success:(result)=&gt;{ my.lists=result.data; } })注意你的...

uni-app官方文档

https://uniapp.dcloud.io/

uni-app运行与调试

上边有菜单,可以运行到浏览器,也可以运行到内置浏览器运行到内置浏览器的效果:

uni-app引入外部资源,引入外网样式

很简单代码如下:&lt;style&gt; @import&#39;http://image.tnblog.net/amazeui.min.css&#39;; &lt;/style&gt; &lt;st...

uni-app设置起始页

很简单,在pages.json里边配置即可。

uni-app页面无法跳转问题

首先检查一下有没有在pages里边配置没有配置不行的哦或者看看你的跳转方式对不对,如果跳转的是底部菜单,但是你用的是uni....

uni-app 删除失败 setting denied access to....

删除的时候如果文件夹下面还有页面,这样直接删除文件夹是会报错的:删除失败 setting denied access to....这种情况就直接...

uni-app中引入外部js

可以使用代码如下:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image.tnblog.net/jqu...

uni-app dom操作

比如引入外部js需要用到的dom操作:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image....

uni-app使用web-view引入页面

代码如下:&lt;template&gt; &lt;viewclass=&quot;h5-html&quot;&gt; &lt;web-view:webview-styles=&quot;webviewStyl...

uni-app真机调试

很简单只要手机开启了usb调试,然后hbuilderx会自动获取到手机的然后运行到手机即可华为手机开启use调试:一直点击版本号进...
走投无路 才选择了程序员
排名
40
文章
11
粉丝
3
评论
0
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术