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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
js实现目录定位正文示例
Nov 14 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
js实现ajax的用户简单登入功能
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
php调用mysql存储过程
2007/02/14 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
php实现简易计算器
2020/08/28 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python使用剪切板的方法
2017/06/06 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python中static相关知识小结
2018/01/02 Python
python 如何调用远程接口
2020/09/11 Python
程序员跳槽必看面试题总结
2013/06/28 面试题
房产委托公证书
2014/04/08 职场文书
司法所长先进事迹
2014/06/02 职场文书
公司踏青活动方案
2014/08/16 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
实名检举信范文
2015/03/02 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL