vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容
父组件中的点击跳转:
<ul class="insurance-entry clearfloat">
<li v-link="{name:'productlist',params:{id:1}}">1</li>
<li v-link="{name:'productlist',params:{id:2}}">2</li>
<li v-link="{name:'productlist',params:{id:3}}">3</li>
<li v-link="{name:'productlist',params:{id:4}}">4</li>
<li v-link="{name:'productlist',params:{id:5}}">5</li>
</ul>
在路由中定义子组件的时候
'/index/productlist/:id':{
//产品列表
name : 'productlist',
component: function (resolve) {
require(['./vue/productlist.vue'],resolve)
}
},
这里一定声明加id('/:id')。
这里的params就是子组件的id可以算作一个参数,在子组件中:
route : {
data (transition){
this.articleId = transition.to.params.id;
}
},
这里就获取了params.id,但是这里用到了vuex,正常传参还没搞明白。。。
vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容的更多相关文章
- zTree中父节点禁用,子节点可以用
参考学习网址:http://www.treejs.cn/v3/main.php#_zTreeInfo zTree中父节点禁用,子节点可以用 axios.get('/base/unit/unittree ...
- vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效
在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- 8、vue路由跳转 params与query 路由传参
params与query router文件下index.js里面,是这么定义路由的: { path: '/about', name: 'About', component: About } 用quer ...
- Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
- angular 中父元素ng-repeat后子元素ng-click失效
在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...
- js 使某个页面不允许在子iframe中打开的解决办法
在页面中添加如下js代码<script> if (window.parent !== window.self) { window.parent.location.reload(); }&l ...
- pom父工程dependencyManagement中的jar包在子工程中不写版本号无法引入的问题
1.遇到的问题: 本人用的idea,然后在导入别人的项目的时候,pom文件中没有报错了,但是在maven栏目中jar包却一直报红,是因为我没写版本的原因吗?不对呀,我的父工程下已经写了springb ...
- Vue.js——60分钟组件快速入门
一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...
随机推荐
- ASP.NET 学习记录之一
(放着期末考试不复习,我每天废寝忘食地阅读从图书馆借来的ASP.NET相关专业书籍,到现在快一个星期,终于掌握了点东西,但是一拿到真刀真枪就做不出来什么了:老师把实验室打开,我就在这码码代码咯) As ...
- 进入meta模式关闭背光灯
1. 修改文件: mediatek/platform/mt6582/lk/boot_mode.c 2. 修改内容: boot_mode_select()函数: mt65xx_blacklight_of ...
- 转载:ORA-01438: 值大于为此列指定的允许精度
Number的数据声明如下: 表示 作用 说明Number(p, s) 声明一个定点数 p(precision)为精度,s(scale)表示小数 ...
- python中try except执行顺序
python中try except finally的执行顺序 先执行try中语句 如果try中抛出异常, 执行异常中语句. 如果try 或 except 中没有return语句,执行完try 或者 e ...
- PP 创建BOM
转自 http://blog.csdn.net/u012369651/article/details/19190939 一.最终结果预览. 二.创建过程. 使用到的事务码 CS01 创建BOM CS0 ...
- javascript设计模式之观察者模式
观察者模式又称发布/订阅模式 publish/subscribe 它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动 ...
- Adobe Flash builder 4的序列号
下载flex 4 之后,需要输入注册码(如果购买了正版就要选择第二个的单选框,无需输入注册码了) 1424-4258-9368-0713-8534-5128 1424-4806-8312-7960-9 ...
- Map练习错误
private Student findStuByNumber(String number) { Student student=null ; for(Stude ...
- linux 添加基于weblogic的nodemanager的服务
用nodemanager来添加weblogic服务启动. 1.新建一个server,命名为Server1,端口设置为7055,其他采用默认值. 2.新建一个Machine,命名为Machine1.配置 ...
- 论SCRM系统对传统行业的冲击
SCRM(Social Customer Relationship Management)顾名思义是社会型客户关系管理系统,这在当前的电子商务领域是一个创新的概念,由于社交媒体(Social Medi ...