vue 使用ref 让父组件调用子组件的方法


Posted in Javascript onFebruary 08, 2018

父级组件上的三个按钮可以

调用子组件loading的三个方法,执行不同的操作

vue 使用ref 让父组件调用子组件的方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <loading ref='load'></loading>
    <button type="button" @click='show'>显示</button>
    <button type="button" @click='hide'>隐藏</button>
    <button type="button" @click='changeColor'>变色</button>
  </div>
</body>
<script type="text/javascript">
  let loading = {
    data() {
      return {
        flag: true
      }
    },
    template: '<div v-show="flag">loading...</div>',
    methods: {
      hide() {
        this.flag = false
      },
      show() {
        this.flag = true
      }
    }
  }
  let vm = new Vue({
    el: '#app',
    components: {
      loading
    },
    methods: {
      // 在组件上的ref获取组件实例
      // 标签的ref 获得标签的dom
      // 使用refs 获取组件实例,然后调用组件的方法即可
      hide() {
        this.$refs.load.hide()
      },
      show() {
        this.$refs.load.show()
      },
      changeColor() {
        // 获取dom实例 操作样式
        this.$refs.load.$el.style.background = 'red'
      }
    }
  })
</script>
</html>

总结

以上所述是小编给大家介绍的vue 使用ref 让父组件调用子组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
JavaScript类库D
Oct 24 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
浅谈JavaScript字符集
May 22 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 #Javascript
web前端页面生成exe可执行文件的方法
Feb 08 #Javascript
ajax前台后台跨域请求处理方式
Feb 08 #Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
You might like
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
linux面试题参考答案(9)
2016/01/29 面试题
保护环境倡议书500字
2014/05/19 职场文书
村容村貌整治方案
2014/05/21 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
党员自我评价2015
2015/03/03 职场文书
同学聚会开幕词
2019/04/02 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS