做网页的网站,百度糯米网站怎么做,天津建设工程信息网招聘,查看网站服务器版本本文介绍了浅谈Vue父子组件和非父子组件传值问题#xff0c;分享给大家#xff0c;具体如下#xff1a;1.如何创建组件1.新建一个组件#xff0c;如#xff1a;在goods文件夹下新建goodsList.vuegoodsList组件export default {data() {return{}},created() {},methods: {}…本文介绍了浅谈Vue父子组件和非父子组件传值问题分享给大家具体如下1.如何创建组件1.新建一个组件如在goods文件夹下新建goodsList.vuegoodsList组件export default {data() {return{}},created() {},methods: {},components:{}}2.在main.js中引入 import goodsList from goods/goodsList.vue3.在main.js中创建路由对象创建路由规则const router new VerRouter({routes[{path:/goods/goodsList,component:goodsList}]})4.在主组件App.vue中设置 商品列表系统会自动帮我们把这个标签转化为a标签href#/goods/goodsList relexternal nofollow2.如何在父组件中嵌入子组件1.新建一个子组件 subcomponent.vue2.在父组件中引入 import subComponent from ../subComponent/subcomponent.vue3.在父组件中注册 componentsexport default {components:{//如果属性名和值相同可以简写subComponent}}4.在父组件指定位置写一个自定义标签3.如何实现父子组件之间的传值1.父组件向子组件传值1.在子组件中设置props:[commentId] //子组件用来接收父组件传递过来值的属性名称2.在父组件的自定义子组件标签中设置//父组件传递值给子组件2.子组件向父组件传值1.在父组件的自定义标签中设置一个自定义函数2.在父组件的methods中声明函数getSubComponentParams(params){//接收来自子组件的参数paramsthis.myParams params;}3.在子组件中传递参数/*** 参数1要触发的事件名称* 参数2传递的值*/this.$emit(paramsChange,this.params)如何实现非父子组件的传值非父子组件中两个组件没有联系不能使用this来传值所以我们只能通过第三方的变量来达到传值的效果这个第三方变量就是使用一个空的 Vue 实例作为中央事件总线传值步骤1.创建一个公用js组件 在组件内导出一个空的Vue实例比如新建一个commonvue.js文件import Vue from vueexport 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) goodsCountconsole.log(lastVal)$(#badgeId).text(lastVal)})以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持我们。本文标题: 浅谈Vue父子组件和非父子组件传值问题本文地址: http://www.cppcns.com/ruanjian/java/200804.html