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 相关文章推荐
javascript与webservice的通信实现代码
Dec 25 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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发电子邮件
2006/10/09 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP fclose函数用法总结
2019/02/15 PHP
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
解决Python requests 报错方法集锦
2017/03/19 Python
python将unicode转为str的方法
2017/06/21 Python
Python下载网络小说实例代码
2018/02/03 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Django添加feeds功能的示例
2018/08/07 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
django-csrf使用和禁用方式
2020/03/13 Python
对python中各个response的使用说明
2020/03/28 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python3跳出一个循环的实例操作
2020/08/18 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python编写实现抽奖器
2020/09/10 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
市场营销职业生涯规划书范文
2014/01/12 职场文书
2015小学师德工作总结
2015/07/21 职场文书
会议室使用管理制度
2015/08/06 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang