vue组件传值的实现方式小结【三种方式】


Posted in Javascript onFebruary 05, 2020

本文实例讲述了vue组件传值的实现方式。分享给大家供大家参考,具体如下:

前言

vue的组件传值分为三种方式:父传子、子传父、非父子组件传值

引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递

父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:

vue组件传值的实现方式小结【三种方式】

下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式

1、父传子

子组件的代码:

<template>
  <div id="container">
    {{msg}}
  </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 props:{
  msg: String
 }
};
</script>
<style scoped>
#container{
  color: red;
  margin-top: 50px;
}
</style>

父组件的代码:

<template>
  <div id="container">
    <input type="text" v-model="text" @change="dataChange">
    <Child :msg="text"></Child>
  </div>
</template>
<script>
import Child from "@/components/Child";
export default {
 data() {
  return {
   text: "父组件的值"
  };
 },
 methods: {
  dataChange(data){
    this.msg = data
  }
 },
 components: {
  Child
 }
};
</script>
<style scoped>
</style>

父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

2、子传父

子组件代码:

<template>
  <div id="container">
    <input type="text" v-model="msg">
    <button @click="setData">传递到父组件</button>
  </div>
</template>
<script>
export default {
 data() {
  return {
   msg: "传递给父组件的值"
  };
 },
 methods: {
  setData() {
   this.$emit("getData", this.msg);
  }
 }
};
</script>
<style scoped>
#container {
 color: red;
 margin-top: 50px;
}
</style>

父组件代码:

<template>
  <div id="container">
    <Child @getData="getData"></Child>
    <p>{{msg}}</p>
  </div>
</template>
<script>
import Child from "@/components/Child";
export default {
 data() {
  return {
   msg: "父组件默认值"
  };
 },
 methods: {
  getData(data) {
   this.msg = data;
  }
 },
 components: {
  Child
 }
};
</script>
<style scoped>
</style>

子传父的实现方式就是用了 this.$emit 来遍历 getData 事件,首先用按钮来触发 setData 事件,在 setData 中 用 this.$emit 来遍历 getData 事件,最后返回 this.msg

总结:

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

3、非父子

vue 中没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件

如果一定需要子对子传参,可以先从传到父组件,再传到子组件(相当于一个公共bus文件)

为了便于开发,vue 推出了一个状态管理工具 vuex,可以很方便实现组件之间的参数传递

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
vue动态绑定style样式
Apr 20 Vue.js
vue路由传参的基本实现方式小结【三种方式】
Feb 05 #Javascript
Vuex的API文档说明详解
Feb 05 #Javascript
如何实现iframe父子传参通信
Feb 05 #Javascript
JavaScript对象原型链原理详解
Feb 05 #Javascript
基于Vue的侧边目录组件的实现
Feb 05 #Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 #Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
You might like
两种php调用Java对象的方法
2006/10/09 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
完美的php分页类
2017/10/24 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
PHP7新增函数
2021/03/09 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
canvas时钟效果
2017/02/16 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python实现验证码识别功能
2018/06/07 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
python config文件的读写操作示例
2019/09/27 Python
如何理解python面向对象编程
2020/06/01 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
测试驱动开发的主要步骤是什么
2014/12/10 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
花店创业计划书范文
2014/02/07 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
交通安全学习心得体会
2016/01/18 职场文书
python xlwt模块的使用解析
2021/04/13 Python
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Python日志模块logging用法
2022/06/05 Python