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的点击链接插入链接内容的代码
Jul 31 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
使用js 设置url参数
Jul 08 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
在vue项目中封装echarts的步骤
Dec 25 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中的cookie
2006/11/26 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
理解javascript模块化
2016/03/28 Javascript
详解vue axios中文文档
2017/09/12 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
一句话工作感言
2014/03/01 职场文书
新手上路标语
2014/06/20 职场文书
实习生工作证明范本
2014/09/14 职场文书
青岛海底世界导游词
2015/02/11 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年化验室工作总结
2015/04/23 职场文书
大学生暑假实习总结
2015/07/13 职场文书
欢迎新生标语2015
2015/07/16 职场文书
改进工作作风心得体会
2016/01/23 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书