浅谈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 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
vue cli安装使用less的教程详解
Jul 12 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无限遍历文件夹示例分享
2014/03/04 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
jQuery设计思想
2017/03/07 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python简单贪吃蛇开发
2019/01/28 Python
python用match()函数爬数据方法详解
2019/07/23 Python
详解Python绘图Turtle库
2019/10/12 Python
python实现智能语音天气预报
2019/12/02 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
python读取ini配置文件过程示范
2019/12/23 Python
浅析matlab中imadjust函数
2020/02/27 Python
python interpolate插值实例
2020/07/06 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
小学庆六一活动方案
2014/02/28 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
英语系本科生求职信
2014/07/15 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技