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 ...
随机推荐
- iOS8: Ignore manifest download, already have bundleID
在企业分发的app下载过程中,iOS8发现挂在官网上的企业版的app点击了提示是否安装应用程序,但始终安装不上程序,的device console发现安装的时候出现 LoadExternalDownl ...
- Xcode6中如何去掉默认的Main.storyboard
xcode 6取消了 Empty Application 模板来创建一个工程,创建出来的有工程多了Main.storyboard,默认加载Main.storyboard,但是有很多人还想用代码来实现U ...
- 转载:Android横屏竖屏切换的问题
一.禁止横竖屏转换 Android横竖屏切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖屏切换时引发不必要的麻烦,通常禁止掉横竖屏的切换, 通过在AndroidManifest.xml中设置 ...
- seo查询命令
以下内容均来自网络,只是稍微整理 感觉比较好用的是1.2.5.6.11.12.13条 1. site指令: 查询某个特定网站收录情况. 比如查询6676小游戏收录格式即为:site:www.6676. ...
- Lua IO库详解
I/O 库提供了两套不同风格的文件处理接口. 第一种风格使用隐式的文件句柄: 它提供设置默认输入文件及默认输出文件的操作, 所有的输入输出操作都针对这些默认文件. 第二种风格使用显式的文件句柄. 当使 ...
- web安全之xss
xss:跨站脚本攻击,攻击者,把一段恶意代码镶嵌到web页面,,用户浏览页面时,嵌入页面的恶意代码就会执行,从而到达攻击用户的目的. 重点在于脚本,javascript和actionscript ...
- while做法1.兔子生兔子 2.求100以内质数的和3.洗发水15元 牙膏5元 香皂2元 150元的算法
1.兔子生兔子 2.求100以内质数的和 3.150块钱花完问题
- c#网络编程
c#网络编程 1.system.net命名空间 DNS类:DNS类包含了许多的方法,总结起来常用的就是获取获取主机地址,获取主机名,根据地址 获取DNS主机信息,根据主机名获取DNS信息: IPadd ...
- ES6笔记一
遍历数组: 1:传统的 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);} ...
- [BZOJ 2819]Nim
最近都忙的没空写题解了喵- 看到 1= 终于是保住了也算是一个小小的安慰吧 555…… 湖北省队互测题,据说会爆栈,但 Linux 下 栈空间=内存=128M 真的吃不下? 反正我是写了个人工栈- 这 ...