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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
js加解密 脚本解密
Feb 22 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
微信小程序实现购物车小功能
Dec 30 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
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
主管会计岗位职责
2014/03/13 职场文书
小学生家长寄语
2014/04/02 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014年财政所工作总结
2014/11/22 职场文书
学生党员检讨书范文
2014/12/27 职场文书
大明湖导游词
2015/02/03 职场文书
开学第一周总结
2015/07/16 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server