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 字符串乘法
Aug 20 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
js读写json文件实例代码
Oct 21 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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通用检测函数集合
2006/11/25 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php自动加载代码实例详解
2021/02/26 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python的装饰器使用详解
2017/06/26 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
护理专业自我鉴定
2014/01/30 职场文书
家长会主持词
2014/03/26 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
扬尘污染防治方案
2014/06/15 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
小学总务工作总结
2015/08/13 职场文书