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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
js实现返回顶部效果
Mar 10 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
大学生就业策划书范文
2014/04/04 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书