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 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
使用python远程操作linux过程解析
2019/12/04 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
会计实习自我鉴定
2013/12/04 职场文书
一年级数学教学反思
2014/02/01 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
大学同学会活动方案
2014/08/20 职场文书
学校2014年度工作总结
2014/12/06 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers