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>

这里的params就是子组件的id可以算作一个参数,在子组件中:

        route : {
            data (transition){
                this.articleId = transition.to.params.id;
            }
        },    

这里就获取了params.id,但是这里用到了vuex,正常传参还没搞明白。。。

时间: 2024-11-10 07:27:08

vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容的相关文章

前端Vue框架 04 路由:逻辑跳转、路由传参 项目组件的数据局部化处理data(){ return{} } 组件的声明周期 组件间通信 各种第三方插件(vuex,axios,element-ui,(jq+bs))

项目初始化 """ 1)根组件:App.vue <template> <div id="app"> <router-view /> </div> </template> 2)路由配置:router/index.js const routes = [ { path: '/', name: 'Home', component: Home } ]; 3)组件:views和components文件夹 i)

Vue.js 源码全方位深入解析(同步更新中)

第1章 准备工作介绍了 Flow.Vue.js 的源码目录设计.Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程. 1-1 课程简介1-2 准备工作1-3 认识 Flow-文档1-4 认识 Flow1-5 Vue.js 源码目录设计-文档1-6 Vue.js 源码目录设计1-7 Vue.js 源码构建-文档1-8 Vue.js 源码构建1-9 从入口开始-文档1-10 从入口开始第2章 数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分析

Vue.js 源码全方位深入解析(同步更新中)

第1章 准备工作介绍了 Flow.Vue.js 的源码目录设计.Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程. 1-1 课程简介1-2 准备工作1-3 认识 Flow-文档1-4 认识 Flow1-5 Vue.js 源码目录设计-文档1-6 Vue.js 源码目录设计1-7 Vue.js 源码构建-文档1-8 Vue.js 源码构建1-9 从入口开始-文档1-10 从入口开始第2章 数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分析

网络操作不能直接写在主线程中 以及 为什么不能在子线程中更新UI控件的属性

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //注意: 所有网络操作不能直接写在主线程中 因为所有的网络操作都是耗时的,如果加载到主线程中,会导致与用户的交互出现问题 ,所以要加载到子线程中 // [self loadImage]; [self performSelectorInBackground:@selector(loadImage) withObject:nil]; } //加

iframe子页面js调用父页面js函数/父页面调用Iframe子页面中js方法

1.假设当前页面为a.html, iframe的src页面为b.html,其代码如下: 1 <span class="tag"><html> 2 <br></span><span class="tag"><head> 3 <br></span><span class="tag"><title></span><s

angular 中父元素ng-repeat后子元素ng-click失效

在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来获取其对应的SCOPE的属性. 1 2 3 4 5 <tr class="odd thead  head"  >                     <td>序号</td>                     <td>客户名称<

zTree中父节点禁用,子节点可以用

参考学习网址:http://www.treejs.cn/v3/main.php#_zTreeInfo axios.get('/base/unit/unittree') .then((response) => { let { meta, data } = response.data; if (meta.success) { if (data && data.unitList) { // 部门树数据配置 let unitList = data.unitList; self.unitLis

Vue.js—组件快速入门以及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册

Vue.js——60分钟组件快速入门

一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在GitHub Pages上了,请访问https://github.com/keepfool/vue-t