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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
vue实现树状表格效果
Dec 29 Vue.js
讲解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缓存技术的多种方法小结
2012/08/14 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
js判断url是否有效的两种方法
2014/03/04 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
爱我中华教学反思
2014/04/28 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python