Vue父子之间值传递的实例教程


Posted in Javascript onJuly 02, 2020

将通过两个input框实现父子之间的值传递作为演示,效果图

Vue父子之间值传递的实例教程

先注册父子各一个组件,代码如下

<div id="app">
    <parent></parent>
  </div>

  <template id="parent">
    <div>
      <input type="text" v-model="text" placeholder="parent">
      <son></son>
    </div>
  </template>
  <template id="son">
    <div>
      <input type="text" placeholder="son">
    </div>
  </template>
new Vue({
    el: "#app",
    components: {
      parent: {
        template: '#parent',
        data() {
          return {
            text: ''
          }
        },
        components: {
          son: {
            template: '#son'
          }
        }
      }
    }
  })

Vue父子之间值传递的实例教程

 一、父传子

再父组件通过属性传递值

<template id="parent">
    <div>
      <input type="text" v-model="text" placeholder="parent">
      <son :text="text"></son>//通过属性值传递
    </div>
  </template>

子组件通过props属性接受

components: {
          son: {
            template: '#son',
            props:['text'] //通过props属性接受父传递过来的值
          }
        }

这样我们就可以使用父组件传递过来的值了

<template id="son">
    <div>
      <input type="text" placeholder="son" :value="text">//使用父元素传递过来的值
    </div>
  </template>

看下现在的效果

Vue父子之间值传递的实例教程

父组件向子组件传递成功

二、子传父

通过父组件自定义事件,然后子组件用$emit(event,aguments)调用

<template id="parent">
    <div>
      <input type="text" v-model="text" placeholder="parent">
      <son :text="text" @ev="item"></son>//自定义事件
    </div>
  </template>


components: {
      parent: {
        template: '#parent',
        data() {
          return {
            text: ''
          }
        },
        components: {
          son: {
            template: '#son',
            props: ['text']
          }
        },
        methods: {
          item(v) { //自定义事件触发的方法
            this.text = v //使用子组件传递过来的值改变this.text数据
          }
        }
      }
    }

再子组件触发自定义事件

<template id="son">
    <div>
      <input type="text" placeholder="son" :value="text" @input="emit" ref="son">//触发自定义事件
    </div>
  </template>



components: {
      parent: {
        template: '#parent',
        data() {
          return {
            text: ''
          }
        },
        components: {
          son: {
            template: '#son',
            props: ['text'], 
            methods: {
              emit() {
                this.$emit('ev', this.$refs.son.value) //触发自定义事件,并传递值
              }
            }
          }
        },
        methods: {
          item(v) {
            this.text = v
          }
        }
      }
    }

这样就完成了子传父,父传子,效果也完成了

总结

到此这篇关于Vue父子之间值传递的文章就介绍到这了,更多相关Vue父子值传递内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
JS跨域代码片段
Aug 30 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
JS出现404错误原理及解决方案
Jul 01 #Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 #Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 #Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 #Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 #Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 #Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python多线程学习资料
2012/12/19 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
django 修改server端口号的方法
2018/05/14 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python 格式化输出百分号的方法
2019/01/20 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
运动会加油稿
2015/07/22 职场文书
经典爱情感言
2015/08/03 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
导游词之任弼时故居
2020/01/07 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis