浅谈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 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jquery移动节点实例
Jan 14 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
vue使用echarts图表的详细方法
Oct 22 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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中stdClass的用法分析
2015/02/27 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PDO::errorInfo讲解
2019/01/28 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
setTimeout学习小结
2017/02/08 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
js回调函数仿360开机
2019/12/26 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python将list转为matrix的方法
2018/12/12 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
python3中确保枚举值代码分析
2020/12/02 Python
Python扫描端口的实现
2021/01/25 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
咖啡店创业计划书
2014/08/15 职场文书
七一讲话心得体会
2014/09/05 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
python实现简单的名片管理系统
2021/04/26 Python