父组件代码:

<template>
<section :class="menuMode === 'vertical' ? 'vertical-sub-nav' : 'sub-nav'">
<el-menu :mode="menuMode" :default-active="defaultActive" :current-tab="currentTab" @select="handleSelect">
<el-menu-item v-for="(data,ind) in subNavData[currentTab]" :index="data.i" :key="ind">
<span class="p5">
{{data.title}}
</span>
</el-menu-item>
</el-menu>
</section>
</template>
<script>
export default {
name: 'NavMenu',
data() {},
props: {
menuMode: {
type: String,
default: 'horizontal'
},
defaultActive: {
type: String,
default: '0'
},
currentTab: {
type: String,
default: '0'
}
}
}
</script>

子组件代码:

<mp-subnav default-active="0" current-tab="0"></mp-subnav>

Vue中父组件传子组件的更多相关文章

  1. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  2. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  3. Vue-组件化,父组件传子组件常见传值方式

    前言 我们都知道vue核心之一:组件化,vue中万物皆组件,组件化我认为应该来至于模块化的设计思想,比如在模块化开发中,一个模块就是一个实现特定功能的独立的文件,有了模块我们就更方便去阅读代码,更方便 ...

  4. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  5. vue-父组件向子组件传值

    一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...

  6. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue 父组件向子组件传值,传方法,传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  9. Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性

    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...

随机推荐

  1. android颜色color.xml设置

     XML Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  2. PTA第四次作业

    题目 7-1 计算职工工资 1.设计思路 (1)第一步:观察题意了解各个参数与所需函数在题目中的意义: 第二步:设计算法编写函数,让函数的功能实现题目中所需的功能: 第三步:运行程序检测是否错误. ( ...

  3. 干货分享: 长达250页的Libvirt Qemu KVM的ppt,不实验无真相

    下载地址:Libvirt Qemu KVM 教程大全 http://files.cnblogs.com/popsuper1982/LibvirtQemuKVM.pptx 1. 概论 1.1 虚拟化的基 ...

  4. [BlueZ] 1、Download install and use the BlueZ and hcitool on PI 3B+

    星期日, 02. 九月 2018 11:58下午 - beautifulzzzz 1. Introduction Bluez is the default Bluetooth protocol sta ...

  5. 阿里分布式事务解决方案-GTS

    摘要: 本文将深入和大家探讨微服务架构下,分布式事务的各种解决方案,并重点为大家解读阿里巴巴提出的分布式事务解决方案----GTS.该方案中提到的GTS是全新一代解决微服务问题的分布式事务互联网中间件 ...

  6. 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]

    本文为原创分享,转载请注明出处. 1.引言 即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成“年/月/日 时:分:秒”这 ...

  7. [Swift]LeetCode592. 分数加减运算 | Fraction Addition and Subtraction

    Given a string representing an expression of fraction addition and subtraction, you need to return t ...

  8. [Swift]LeetCode991. 坏了的计算器 | Broken Calculator

    On a broken calculator that has a number showing on its display, we can perform two operations: Doub ...

  9. vs2013+opencv3.2配置

    opencv库在3.0以后分为opencv库和opencv_contrib库两部分,其中opencv_contrib库是一个扩展库,如果需要使用SIFT和SURF算法就需要安装这个扩展库,否则只用安装 ...

  10. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...