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类的静态属性和实例属性的理解
Oct 01 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
浅析vue数据绑定
Jan 17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
js对象简介与基本用法示例
Mar 13 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
浅析vue中的nextTick
2020/12/28 Vue.js
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
python3.7.0的安装步骤
2018/08/27 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
weblogic面试题
2016/03/07 面试题
质量承诺书格式
2014/05/20 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年工程部工作总结
2015/04/30 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript