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 相关文章推荐
一个JQuery操作Table的代码分享
Mar 30 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
JS数组去重详情
Nov 07 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
PHP读取Excel类文件
2017/05/15 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
Angular排序实例详解
2017/06/28 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
js实现随机8位验证码
2020/07/24 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python对XML文件的操作实现代码
2020/03/27 Python
python datetime处理时间小结
2020/04/16 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Oracle性能调优原则
2012/05/03 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
产品质量承诺范本
2014/03/31 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
展览会邀请函
2015/02/02 职场文书
革命电影观后感
2015/06/18 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript