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中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
Openlayers实现地图全屏显示
Sep 28 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python连接MySQL数据库实例分析
2015/05/12 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python实现批量转换图片为黑白
2020/06/16 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
实习护士自荐信
2014/06/21 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL