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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
Jquery选择器 $实现原理
Dec 02 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
在php中取得image按钮传递的name值
2006/10/09 PHP
php日历[测试通过]
2008/03/27 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
网上抓的一个特效
2007/05/11 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
python开发简易版在线音乐播放器
2017/03/03 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python中dict使用方法详解
2019/07/17 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
服务员岗位职责
2014/01/29 职场文书
员工培训邀请函
2014/02/02 职场文书
社区义诊活动总结
2014/04/30 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
Python 中面向接口编程
2022/05/20 Python