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 设计模式(二) 闭包
May 26 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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和ACCESS写聊天室(二)
2006/10/09 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
python学习 流程控制语句详解
2016/06/01 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
解析Python的缩进规则的使用
2019/01/16 Python
numpy.array 操作使用简单总结
2019/11/08 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
python主要用于哪些方向
2020/07/05 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
绿化工程实施方案
2014/03/17 职场文书
核心价值观演讲稿
2014/05/13 职场文书
教师个人年终总结
2015/02/11 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
开学随笔
2015/08/15 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
Java8中接口的新特性使用指南
2021/11/01 Java/Android