Vue 组件传值几种常用方法【总结】


Posted in Javascript onMay 28, 2018

使用vue也有很多年了,一直都没有整理一下相关知识,给大家总结下开发过程中所遇到的一些坑,主要给大家总结一下vue组件传值的几种常用方法:

1、通过路由带参数传值

   ① A组件通过query把id传给B组件         

this.$router.push({path:'/B',query:{id:1}})

  ② B组件接收 

this.$route.query.id

2、父组件向子组件传值

使用props向子组件传递数据

子组件部分:child.vue

<template>
  <div>
    <ul>
      <li v-for='(item,index) in nameList' :key='index'>{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['nameList']
}
</script>

父组件部分:

<template>
  <div>
    <div>这是父组件</div>
    <child :name-list='names'></child>  
  </div>
</template>
<script>
import child from './child.vue'
export default {
  components:{
    child
  },
  data(){
    return{
      names:[
        {name:'柯南'},
        {name:'小兰'},
        {name:'工藤新一'}
      ]
    }
  }
}
</script>

3、子组件向父组件传值

    子组件主要通过事件向父组件传递数据:

    子组件部分:

<template>
  <div>
    <ul>
      <li v-for='(item,index) in nameList' :key='index'>{{item.name}}</li>
    </ul>
    <Button @click='toParent'>点击我</Button>
  </div>
</template>
<script>
export default {
  props:['nameList'],
  methods:{
    toParent(){
      this.$emit('emitData',123)
    }
  }
}
</script>

父组件部分:

<template>
  <div>
    <div>这是父组件</div>
    <child :name-list='names' @emitData='getData'></child>  
  </div>
</template>
<script>
import child from './child.vue'
export default {
  components:{
    child
  },
  data(){
    return{
      names:[
        {name:'柯南'},
        {name:'小兰'},
        {name:'工藤新一'}
      ]
    }
  },
  methods:{
    getData(data){
      console.log(data); //123
    }
  }
}
</script>

总结

以上所述是小编给大家介绍的Vue 组件传值几种常用方法【总结】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript一点特殊用法
May 28 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
讲解vue-router之命名路由和命名视图
May 28 #Javascript
微信小程序实现图片上传功能
May 28 #Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 #Javascript
讲解vue-router之什么是编程式路由
May 28 #Javascript
讲解vue-router之什么是嵌套路由
May 28 #Javascript
微信小程序上传图片实例
May 28 #Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
You might like
谈谈PHP语法(3)
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
js评分组件使用详解
2017/06/06 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python max内置函数详细介绍
2016/11/17 Python
python 为什么说eval要慎用
2019/03/26 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
django基于restframework的CBV封装详解
2019/08/08 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
数控加工专业毕业生自荐信
2013/09/27 职场文书
24岁生日感言
2014/01/13 职场文书
工伤赔偿协议书
2014/04/15 职场文书
医院院务公开实施方案
2014/05/03 职场文书
2014年科协工作总结
2014/12/09 职场文书
信访维稳承诺书
2015/05/04 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书