浅谈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 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
JS实现碰撞检测的方法分析
Jan 19 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP微信支付实例解析
2016/07/22 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python插入排序算法实例分析
2015/07/03 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python为什么会环境变量设置不成功
2020/06/23 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
快递业务员岗位职责
2014/01/06 职场文书
内衣营销方案
2014/03/15 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
会计主管竞聘书
2015/09/15 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
员工安全责任协议书
2016/03/22 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python