路由文件

{
path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/productList', children: [
{
path: '/productList',
components: {
default: Banner,
product_list: ProductList
}
}
]
},

这个是中间文件(也就是父级)

<template>
<div class="product">
<router-view :aaa="aaa"></router-view>
<router-view name="product_list"></router-view>
</div>
</template> <script>
export default {
data(){
return {
aaa:{
name_en:'PRODUCT',
name_zh:'MIRROR产品'
}
}
}
}
</script>

在父级设置参数,如果是aaa='aaa',此时传的是aaa的字符串,而:aaa="aaa"传的是对象(或数组)

在子页面接收参数

export default {
props:['aaa'],
computed:{
my(){
this.banner = this.aaa
console.log(this.aaa,'aaa')
}
},
}

通过 props 来接收父级传过来的参数,然后在 使用computed属性将收到的值赋给当前组件的data中的banner。

最后要记得在子页面中调用 my() 方法

<template>
<div>
{{my}}
</div>
</template>

子组件向父组件传值

子组件

this.$emit("changes",);

父组件

<searchH ref="searchH" @changes="aaa()"></searchH>

methods:{
aaa(e){
console.log(e)
}
}

每天一点点之vue框架开发 - vue组件之间传值(父向子传值)的更多相关文章

  1. 每天一点点之vue框架开发 - vue坑-This relative module was not found

    94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...

  2. 每天一点点之vue框架开发 - vue坑-input 的checked渲染问题

    选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中 ...

  3. 每天一点点之vue框架开发 - vue 动态替换路由(地址栏)参数

    import merge from 'webpack-merge': // 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'max ...

  4. 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

    1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...

  5. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  6. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  7. Vue 框架-09-初识组件的应用

    Vue 框架-09-初识组件的应用 今天的第一个小实例,初步使用组件: 在 app.js 中定义模板组件,在 html 文件中使用自定义标签来显示 js 文件中定义的 html 代码块 比如说,下面定 ...

  8. Vue框架:vue-cookies组件

    目录 一.vue-cookies简介 二.vue-cookies安装与配置 三.vue-cookies的使用 一.vue-cookies简介 vue-cookies组件是vue框架用来操作浏览器coo ...

  9. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

随机推荐

  1. Linux CentOS7 VMware usermod命令、用户密码管理、mkpasswd命令

    一. usermod命令 usermod可用来修改用户帐号的各项设定 -c, --comment 注释 GECOS 字段的新值 -d, --home HOME_DIR 用户的新主目录 -e, --ex ...

  2. 分享Burp Suite遇到的各种坑

    1.性质问题 价格昂贵 专业版高达399美元/每年,免费版有功能限制:https://portswigger.net/buy/pro,构想中的工具应该是免费开源的. 破解版存在安全隐患 https:/ ...

  3. 图解IDEA中配置Maven并创建Maven的Web工程

    打开IDEA,File->Settings,如下图所示: 2.在Settings中按照如下进行配置,如下图所示:

  4. Verilog的非阻塞语句放到顺序块中,综合出来怎样的逻辑电路?

    情境: FPGA里面计数器需要复位(计数值置零),与计数器状态有关的行为是状态机控制的,即状态机为CLEAR_TIMER状态时,计数器才完成清零动作. 清零有两个条件:(1)计数器值溢出(达到OVF门 ...

  5. 图片索引 lire

    1:定义  LIRE( Lucene Image Retrieval)相似图像索引和搜索机制 2:资料来源     LIRE官网:http://www.semanticmetadata.net/lir ...

  6. anaconda 创建虚拟环境(自己版本)

    首先安装anaconda(3) Anacond的介绍Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. 因为包含了大量的科学包,Ana ...

  7. 2-10 就业课(2.0)-oozie:10、伪分布式环境转换为HA集群环境

    hadoop 的基础环境增强 HA模式 HA是为了保证我们的业务 系统 7 *24 的连续的高可用提出来的一种解决办法,现在hadoop当中的主节点,namenode以及resourceManager ...

  8. STM32 MacOS开发

    CLion + STM32CubeMX + STLINK 安装CLion jetbrain官网 汉化补丁 安装homebrew ...略 安装STlink命令工具 $ brew install stl ...

  9. navicat报错2005 - Unknown MySQL server host 'localhost' (0) 原因及解决方法

    报错原因:没有连接互联网,用navicat连接本地mysql数据库,连接属性ip为localhost. 解决办法:将ip改为127.0.0.1即可.localhost是需要DNS解析后才会是127.0 ...

  10. UCENTER同步登录工作原理和配置要点

    ucenter的同步登录原理: 1)Ucenter是和uc_client同步的.每个PHP应用,加入了UCENTER后,都会在主目录下有个UC_CLIENT目录.这个目录里,都有一个client.PH ...