每天一点点之vue框架开发 - vue组件之间传值(父向子传值)
路由文件
{
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组件之间传值(父向子传值)的更多相关文章
- 每天一点点之vue框架开发 - vue坑-This relative module was not found
94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...
- 每天一点点之vue框架开发 - vue坑-input 的checked渲染问题
选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中 ...
- 每天一点点之vue框架开发 - vue 动态替换路由(地址栏)参数
import merge from 'webpack-merge': // 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'max ...
- 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- Vue 框架-09-初识组件的应用
Vue 框架-09-初识组件的应用 今天的第一个小实例,初步使用组件: 在 app.js 中定义模板组件,在 html 文件中使用自定义标签来显示 js 文件中定义的 html 代码块 比如说,下面定 ...
- Vue框架:vue-cookies组件
目录 一.vue-cookies简介 二.vue-cookies安装与配置 三.vue-cookies的使用 一.vue-cookies简介 vue-cookies组件是vue框架用来操作浏览器coo ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
随机推荐
- MyISAM/Innodb的区别
MyISAM是MySQL的默认数据库引擎(5.5版之前).虽然性能极佳,而且提供了大量的特性,包括全文索引.压缩.空间函数等,但MyISAM不支持事务和行级锁,而且最大的缺陷就是崩溃后无法安全恢复.不 ...
- layui-简单的登录注册界面
register.html 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CH10 泛型算法
概述 大多数算法都定义在algorithm头文件中. Note:算法永远不会执行容器操作 泛型算法本身不会执行容器的操作,而是通过迭代器来访问.修改等操作 10.1 题目要求读取数据存入vector, ...
- 题解 P5043 【【模板】树同构([BJOI2015]树的同构)】
进入正题 题意:将所有树结构相同的树归类. 思路 嗯,这道题让我们把树的结构归类,自然而然就想到了哈希,我们对这整颗树哈希一遍.然后判同构就十分之简单了.只需要找哈希值一样的树就可以了. 其实真得很简 ...
- js取值问题----key为数字
今天远程调用一个接口在处理返回的数据的时候突然发现数组的Key是一个数字 然后如果继续用“.”的话是不会的,会报错 要用中括号就可以解决
- 选择本地文件上传控件 input标签
当要通过控件来选择本地文件上传的时候的一种方式 <input type="file" id="input-file"/> 注意 type类型一定要是 ...
- http协议请求报文与响应报文分析
什么是HTTP协议: HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到 不断地完善和扩展.目前在WWW中使用 ...
- 051、Java中使用while循环实现1~100的累加
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 013.Delphi插件之QPlugins,模块化代码示例
这个DEMO的是一个定义了一个窗体插件接口,把其他窗口注册到这个窗体插件接口中.主程序运行起来,就遍历一下窗体插件接口,把每个窗体内嵌到对话框中 运行效果如下 主窗口代码如下 unit Frm_Mai ...
- xaml与CSS中的Margin顺序不同
XAML中 Margin:左 上 右 下 CSS中 Margin:上 右 下 左