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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
js继承实现方法详解
Dec 16 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
Angular实现的进度条功能示例
Feb 18 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
银行实习生的自我评价
2013/12/09 职场文书
销售心得体会
2014/01/02 职场文书
机械个人求职信范文
2014/01/24 职场文书
信息工作经验交流材料
2014/05/28 职场文书
环境保护建议书
2014/08/26 职场文书
小学运动会宣传稿
2015/07/23 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书