vue父子组件传值props
父组件Home.vue
<div id="home"><menutree :data="menuData"></menutree>
</div>
<script>
export default {components: {menutree: menutree},data() {return {menuData: [],breadcrumbText: ""};},methods: {},mounted() {this.menuData= JSON.parse(localStorage.getItem("menus"));},watch: {//监控路由,来获取面包屑导航的值$route(to, from) {for (var ele of this.menuData) {if (ele.children) {for (var ele2 of ele.children) {var temp = ele2.to;if (temp === this.$route.path)//如果有,就添加到路由列表里面去this.breadcrumbText = ele2.name;}}}}}
};
</script>
子组件menutree.vue
<template><div><el-submenu v-for="(menu,index) in data" :key="index" :index="menu.index"><template slot="title"><i class="el-icon-location"></i><span>{{menu.name}}</span></template><el-menu-itemv-for="(emenu,eindex) in menu.children":key="eindex":index="emenu.to">{{emenu.name}}</el-menu-item></el-submenu> </div>
</template><script>
export default {name: "menutree",data() {return {menuData: {}};},props: ["data"]
};
</script>
vue父子组件传值props相关推荐
- vue父子组件传值:详解父组件向子组件传值(props)
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
- vue父子组件传值之 $emit和props
vue父子组件传值之 $emit和props 前言 子组件向父组件传值 父组件向子组件传值 前言 在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props ...
- Vue父子组件传值----$emit子传父
Vue父子组件传值是个比较经典的问题,在这里,咱们先谈一下,子组件给父组件传值. 这是一个子组件 <!-- 子组件1 --> <template><div class=& ...
- vue父子组件传值的一些坑(深浅拷贝)
本文章转载:https://www.yht7.com/news/116487 1.问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
- vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
- vue 父子组件传值
父子组件传值 最常用的方法(4种) 1 . 父组件 传递数据 给子组件(props)vue官方文档 特别注意!!特别注意!!特别注意!! props传值的类型如果是Object类型,如对象,数组等,传 ...
- 快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率 今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值 <!-- 父组件 --> ...
- VUE父子组件传值(含实例)
vue父子组件通信 这里的movies数组和message字符串,相当于是在父组件中对要传给子组件的数据做赋值或者计算等操作. 1.父传给子(在子组件中改数据) 父组件: 1.在子组件上绑定数据arr ...
- Vue父子组件传值问题
今天在编写vue子组件时遇到的两个问题来分享以下 父子组件传值问题 父组件 <md-editor ref="mdEditor" :text="form.conten ...
最新文章
- win10系统配置apache 2.4的虚拟主机以及查看 apache的版本
- gradle风格的groovy代码
- 【刷题记录】杂题记录
- 在线IDE之关键字另色显示
- 十进制中正整数N中1的个数(2)
- 如何只用2GB内存从20/40/80亿个整数中找到出现次数最多的数
- Go 语言web 框架 Gin 练习5
- 北斗导航 | 基于RTK的GNSS与多源融合定位技术发展与挑战
- 开源项目SlidingMenu的使用(Android)
- 生成有时间限制的二维码_二维码竟有被用完的一天!看到截止日期后,网友:虚惊一场...
- linux常见功能代码,几种功能类似Linux命令汇总(示例代码)
- 对复杂字典DictionaryT1,T2排序问题
- 数据库建模工具powerdisgner16.5
- 读取FBX文件踩坑清单
- 设置idea的ant工具的代理
- 魅族mx4 android5.0,第一手更新 魅族MX4Pro安卓5.0抢先体验
- python读取excel表格数据
- js中创建桌面网页快捷方式代码
- 算法:使用单词表拼接字符串的方法数
- Matlab:无穷和 NaN