浅谈Vue父子组件和非父子组件传值问题


Posted in Javascript onAugust 22, 2017

本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下:

1.如何创建组件

1.新建一个组件,如:在goods文件夹下新建goodsList.vue

<template>
  <div class='tmpl'>
    goodsList组件
  </div>
</template>

<style>

</style>

<script>

  export default {
    data() {
      return{}
    },
    created() {

    },
    methods: {

    },
    components:{

    }
  }
</script>

2.在main.js中引入 import goodsList from 'goods/goodsList.vue'

3.在main.js中创建路由对象,创建路由规则

const router = new VerRouter({
  routes[
    {path:/goods/goodsList,component:goodsList}
  ]
})

4.在主组件App.vue中设置 <router-link to="/goods/goodsList">商品列表</router-link>

系统会自动帮我们把这个标签转化为a标签href="#/goods/goodsList" rel="external nofollow"

2.如何在父组件中嵌入子组件

1.新建一个子组件 subcomponent.vue

2.在父组件中引入 import subComponent from '../subComponent/subcomponent.vue'

3.在父组件中注册 components

export default {
    components:{
      //如果属性名和值相同,可以简写
      subComponent
    }
  }

4.在父组件指定位置写一个自定义标签<subComponent></subComponent>

3.如何实现父子组件之间的传值

1.父组件向子组件传值

1.在子组件中设置props:['commentId'] //子组件用来接收父组件传递过来值的属性名称

2.在父组件的自定义子组件标签中设置<subComponent :commentId="this.$route.params.photoId"></subComponent>//父组件传递值给子组件

2.子组件向父组件传值

1.在父组件的自定义标签中设置一个自定义函数<subComponent v-on:paramsChange="getSubComponentParams"></subComponent>

2.在父组件的methods中声明函数

getSubComponentParams(params){
  //接收来自子组件的参数params
    this.myParams = params;
  }

3.在子组件中传递参数

/**
  * 参数1:要触发的事件名称
  * 参数2:传递的值
  */
  this.$emit('paramsChange',this.params)

如何实现非父子组件的传值

非父子组件中两个组件没有联系,不能使用this来传值,所以我们只能通过第三方的变量,来达到传值的效果,这个第三方变量就是:

使用一个空的 Vue 实例作为中央事件总线

传值步骤:

1.创建一个公用js组件 在组件内导出一个空的Vue实例,比如新建一个commonvue.js文件

import Vue from 'vue'

export default new Vue() //es6的写法
/**
 * 相当于下面这样写
 * 
 * const bus = new Vue()
 * module.exports = bus
 */

2.在组件A中传递参数

bus.$emit('goodsCount',this.myCount)

3.在组件B中接收参数

bus.$on('goodsCount',(goodsCount)=>{
   const oldVal = $("#badgeId").text()

   const lastVal = parseInt(oldVal) + goodsCount
   console.log(lastVal)
   $("#badgeId").text(lastVal)
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
微信小程序异步处理详解
Nov 10 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 #Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 #Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 #Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
React学习笔记之列表渲染示例详解
Aug 22 #Javascript
bootstrap switch开关组件使用方法详解
Aug 22 #Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
JS实现轮播图效果
2020/01/11 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python SQLite3简介
2018/02/22 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
商务日语专业的自荐信
2014/05/23 职场文书
依法行政工作汇报
2014/10/28 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Python 阶乘详解
2021/10/05 Python