Vue通过ref父子组件拿值方法


Posted in Javascript onSeptember 12, 2018

父拿子的值

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
</head>
<body>
<div id="box">
 <v-tpl1></v-tpl1>
</div>
<template id="tpl1">
 <div>
  <p>{{msg1}}</p>
  <!--触发拿子组件值的函数-->
  <button @click="getChild">父拿子的值</button>
  <!--通过ref绑定子组件的值-->
  <v-tpl2 ref="shit"></v-tpl2>
 </div>
</template>
<template id="tpl2">
 <p>{{msg2}}</p>
</template>
<script>
 new Vue({
  el: '#box',
  components: {
   'v-tpl1': {
    template: '#tpl1',
    data(){
     return {
      msg1: 'msg1'
     }
    },
    methods: {
     //父组件定义一个方法通过refs拿到子组件的值
     getChild(){
      console.log(this.$refs.shit.msg2)
     }
    },
    components: {
     'v-tpl2': {
      template: '#tpl2',
      data(){
       return {
        msg2: 'msg2'
       }
      }
     }
    }
   }
  }
 })
</script>
</body>
</html>

子拿父的值

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
</head>
<body>
<div id="box">
 <v-tpl1></v-tpl1>
</div>
<template id="tpl1">
 <div>
  <v-tpl2></v-tpl2>
 </div>
</template>
<template id="tpl2">
 <div>
  <button @click="getParent">子拿父的值</button>
  <p>{{msg2}}</p>
 </div>
</template>
<script>
 new Vue({
  el: '#box',
  components: {
   'v-tpl1': {
    template: '#tpl1',
    data(){
     return {
      msg1: 'msg1'
     }
    },
    components: {
     'v-tpl2': {
      template: '#tpl2',
      data(){
       return {
        msg2: 'msg2'
       }
      },
      methods:{
       getParent(){
        console.log(this.$parent.msg1)
       }
      }
     }
    }
   }
  }
 })
</script>
</body>
</html>

有了ref拿值不能更方便~

以上这篇Vue通过ref父子组件拿值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
使用JS动态显示文本
2017/09/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
js实现开关灯效果
2020/03/30 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
建筑投标担保书
2014/05/20 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
信访维稳工作汇报
2014/10/27 职场文书
年终工作总结范文2014
2014/11/27 职场文书
顶岗实习协议书
2015/01/29 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
社区义诊通知
2015/04/24 职场文书
美丽的大脚观后感
2015/06/03 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书