浅谈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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JavaScript 函数的执行过程
May 09 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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使用memcache存储session的详解
2013/06/25 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
php表单处理操作
2017/11/16 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
心理健康心得体会
2014/01/02 职场文书
大学生校园创业计划书
2014/02/08 职场文书
档案保密承诺书
2014/06/03 职场文书
2014年度思想工作总结
2014/11/27 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书