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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
javascript中indexOf技术详解
May 07 Javascript
关于JS中prototype的理解
Sep 07 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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循环输出数据库内容的代码
2008/05/24 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python shutil模块用法实例分析
2019/10/02 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python属性和内建属性实例解析
2020/01/14 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python批量生成条形码的示例
2020/10/10 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
打架检讨书400字
2014/01/17 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
天那边观后感
2015/06/09 职场文书