浅谈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分割字符串并放入数组的函数
Jul 04 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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数组(array)输出的三种形式详解
2013/06/05 PHP
如何在PHP中使用数组
2020/06/09 PHP
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
使用Python更换外网IP的方法
2018/07/09 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python修改文件内容的3种方法详解
2019/11/15 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
英语专业学生个人求职信范文
2014/01/06 职场文书
火锅店的活动方案
2014/08/15 职场文书
2015年考研复习计划
2015/01/19 职场文书
个人优缺点总结
2015/02/28 职场文书
毕业论文致谢信
2015/05/14 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL