精华内容
下载资源
问答
  • 主要介绍了vue组件间参数传递 ,需要的朋友可以参考下
  • 主要介绍了Vue组件间数据传递的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 组件间数据传递

    千次阅读 2019-08-08 08:53:01
    数据传递方式 ... 兄弟组件间传值 ================================================================================== 父组件传值到子组件 1,在父组件中 引用子组件 在子组件中动态绑定数据 动态数据...

    数据传递方式

    1. 父组件传递到子组件
    2. 子组件 传 父组件
    3. 父组件 直接拿子组件数据
    4. 子组件直接拿 父组件数据
    5. 兄弟组件间传值

    ==================================================================================

    父组件传值到子组件

    1,在父组件中 引用子组件  在子组件中动态绑定数据         动态数据的绑定用v-bind

     array是父组件中的数据 可以是多种类型

    2,在子组件中 利用props 对象 接收数据         

    接收数据的方式:

    1. 数组形式: value 是父组件中的自定义属性,这里应该是arrList
    2. 对象形式 :对象名为 自定义属性名,在内部可以进行类型检测,默认值等  default 可以定义成一个函数,返回什么进行验证

    简写     props:{                 arrList:Array                                           }    数据:类型

    ================================================================================================

    子组件传值到父组件

    利用 this.$emit

    1. 在子组件中  this.$emit("自定义事件名",this.mag)    ,自定义一个事件,并传递数据
    2. 在父组件中监听自定义事件, 在子组件标签中 写 @自定义事件名=“父组件事件” 当监听到 就会调用父组件事件
    3. 父组件中的事件对应函数的 参数 就是传递过来的值

    this.$emit("datavalue",this.msg)   这行代码在子组件中

    <子组件标签   @datavalue="getdata" >   这是父组件中的子组件标签

    getdata(val){

               val   (this.msg)

    }

    ========================================================================================

    父组件 直接取得 子组件数据

    1. 在父组件中的 子组件标签上 定义属性    ref = ‘val’
    2. 在函数中 使用  this.$refs.val.msg  就能拿到子组件数据

    =============================================================================================

    子组件 直接 从父组件拿数据

    this.$parent.msg         直接就能拿到父组件数据

    ======================================================================================

    兄弟组件之间 的数据传递

    https://blog.csdn.net/biao_feng/article/details/81510111

     

    ------------------------------非常详细  ,以后可以回来翻阅-------------------------------------------------------------------

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • vue页面间参数传递方法总结

    千次阅读 2018-11-20 21:20:53
    方法一:通过路由带参数进行传值 方法二:通过设置 Session Storage/local Storage缓存的形式进行传递 1、 原生用法使用 2、 对Session Storage/local Storage缓存进行统一封装 方法三:父子组件之间的传值(通过...

    目录

     

    方法一:通过路由带参数进行传值

    方法二:通过设置 Session Storage/local Storage缓存的形式进行传递

    1、 原生用法使用

    2、 对Session Storage/local Storage缓存进行统一封装

    方法三:父子组件之间的传值(通过props属性)

    1、父组件给子组件传值

    2、子组件给父组件传值(通过emit事件)

    方法四:不同组件之间传值,通过eventBus

    方法五:vuex进行传值

    参考


    方法一:通过路由带参数进行传值

    需求:两个页面A,B,页面A传递参数值phase给页面B.

    做法:

    1)页面A附加参数://更新地址栏里面的信息哦

    router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})

    PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B

    2) 页面B获取地址栏中的参数;

    this.$route.query.project_id

    方法二:通过设置 Session Storage/local Storage缓存的形式进行传递

    想了解更多有关sessionStorage/localStorage,请移步:

    https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081

    https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916

    1、 原生用法使用

    window.localStorage['aaa']='一个例子啊'
    
    console.log(window.localStorage.getItem('aaa'))
    
    window.localStorage.setItem('test1',[1,2,3,4,5,6])
    
    window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777})
    
    window.localStorage.setItem('test3','dfdfdf')
    
    console.log(window.localStorage.getItem('test1'))
    
    console.log(window.localStorage.getItem('test2'))
    
    console.log(window.localStorage.getItem('test3'))
    
    
    
    window.sessionStorage.setItem('test1',[1,2,3,4,5,6])
    
    window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777})
    
    window.sessionStorage.setItem('test3','dfdfdf')
    
    console.log(window.sessionStorage.getItem('test1'))
    
    console.log(window.sessionStorage.getItem('test2'))
    
    console.log(window.sessionStorage.getItem('test3'))

    缺点:

    1)到处直接使用localstorage['aaa']='xxx'这些原生语法实现,这样耦合度太高了,假如有一天需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多

    2)起的key的名字难免会重复,而且这样也会造成全局污染

    3) 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用

    解决:

    封装storage的使用方法,统一处理

    规范storage的key值的命名规则

    规范storage的使用规范

    2、 对Session Storage/local Storage缓存进行统一封装

    import localstorage from '@src/util/localstorage';
    
    import sessionstorage from '@src/util/sessionstorage';
    
    import storage from '@src/util/storage';
    
    
    
    storage.storage('l','djjdjjd','jwejjwjejw',1);
    
    storage.storage('s','djjdjjd','jwejjwjejw',1);
    
    let a = storage.storage('l','djjdjjd',undefined,null);
    
    console.log(a)

     

    例如:页面A,B

    页面A中设置:storage.set('s','djjdjjd','jwejjwjejw',1);

    页面B中获取:storage.get('s')

    ps:Session Storage(程序退出销毁) 和 Local Storage(长期保存)

    localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M

    方法三:父子组件之间的传值(通过props属性)

    1、父组件给子组件传值

    父组件核心代码:

    ps: SubmitTest 为子组件名称

    <SubmitTest :iteration_id='this.iteration_id'/>

    子组件核心代码:

    props: {
            iteration_id: {
                type: String
            }

    2、子组件给父组件传值(通过emit事件)

    具体参考:https://www.cnblogs.com/LoveAndPeace/p/7273648.html

    方法四:不同组件之间传值,通过eventBus

    场景:小项目,页面量较少的情况下使用

    使用前可以在全局定义一个eventBus
    
    
    window.eventBus = new Vue();
      在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象)
    
    
    eventBus.$emit('eventBusName', id);
      在需要接受参数的组件重,用on接受该值(或对象)
    
    
    //val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br>   console.log(val)<br>})
      最后记住要在beforeDestroy()中关闭这个eventBus
    
    eventBus.$off('eventBusName');

    方法五:vuex进行传值

    场景:vuex主要是是做数据交互,适用于大项目,页面量较多的业务

    解决难题:父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手

    例子: 两个组件A和B,vuex维护的公共数据是地理位置,现在A和B页面显示的是相同的地理位置。 需求想实现:如果A修改了地理位置,则B页面的显示随之修改,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

    vuex了解:

    https://vuex.vuejs.org/zh/

     

    参考

    https://blog.csdn.net/qq_35430000/article/details/79291287

    https://www.cnblogs.com/ygtq-island/p/6728137.html

    https://www.cnblogs.com/LoveAndPeace/p/7273648.html

     

     

     

    展开全文
  • Vue组件封装 参数传递和事件传递

    千次阅读 2018-12-14 09:39:00
    参数传递组件先定义好接收的参数和事件 {{title}} ()" >刷新 props: {//参数传递需要在props里面声明 'title': { type: String, default: '' }, }, methods: {//事件传递需要通过$emit...

    参数传递

    子组件先定义好接收的参数和事件

        <div >
          {{title}}
          <div class="row">
            <Button icon="md-refresh" @click="refresh()" >刷新</Button>
          </div>
        </div>
    
    
     props: {//参数传递需要在props里面声明
            'title': {
              type: String,
              default: ''
            },
          },
    
     methods: {//事件传递需要通过$emit来传递,参数refresh要与父组件@后面的属性相对应
              refresh(){
                this.$emit('refresh');
              }
            },

    父组件传递参数给子组件

    <KJtitle title="矿金管理" @refresh="myRefresh">
    
      </KJtitle>

     

    转载于:https://my.oschina.net/carbenson/blog/2988346

    展开全文
  • vue使用路由在兄弟组件间参数传递

    千次阅读 2019-06-21 14:06:46
    在没有使用路由时,vue参数传递是被限制在父子组件中,而当兄弟组件间需要传递参数时是很繁琐的,只能子传父父传子这样绕圈;但使用了路由之后就变得轻松许多。 根组件App: router-view的注意点在代码中已经注释...

    摘要:
    在没有使用路由时,vue中参数传递是被限制在父子组件中,而当兄弟组件间需要传递参数时是很繁琐的,只能子传父父传子这样绕圈;但使用了路由之后就变得轻松许多。
    根组件App:

    router-view的注意点在代码中已经注释。
    HelloWorld组件:
    在这里插入图片描述
    在这个组件中使用编程式导航进行跳转(router-link标签为申明式导航,且可以很方便的借助此标签的动态类名做高亮效果),并借助query查询字符串来传递参数
    Test组件:
    在这里插入图片描述
    在这里插入图片描述
    在Test组件中可以通过self. r o u t e . q u e r y 来 调 取 路 由 相 关 的 参 数 , route.query来调取路由相关的参数, route.queryroute里面有很多属性可以console看看
    在这里插入图片描述
    可以看见,包含了当前组件路由的所有信息,fullPath,matched,query,params,meta等(侧边栏动态路由高亮以及默认,就会用到matched中对象的path属性进行判断),到此借助路由的查询字符串传参已经完成了
    还可以借助路由的params来传递参数
    HelloWorld组件:
    在这里插入图片描述
    Test组件:
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    但是如果我们将path和params一起用呢
    在这里插入图片描述在这里插入图片描述
    一起用的结果就是参数传递失败,原因在路由官网有说明
    在这里插入图片描述
    所以说明path+query,name+parmas都可以传递参数,也可以像官网说的一样直接用path中用模板字符串+占位符来拼接url,且不管是path还是name,都是指明了特定组件的,所以只会向指定的组件路由上去注入参数,其他兄弟组件的路由是接收不到的。

    还有一种方式也是官方推荐的:
    在这里插入图片描述
    在这里插入图片描述
    在定义路由时,加上props属性,将route作为参数传进箭头函数,然后取出里面的查询字符串并存进了props
    HelloWorld组件:
    在这里插入图片描述
    路由index.js文件:
    在这里插入图片描述
    Xx组件:
    在这里插入图片描述
    在这里插入图片描述
    页面:
    在这里插入图片描述
    在这里插入图片描述
    这种方式传递参数,一是需要在配置路由时把props定义为一个函数,二是在组件内用props去接收,就完成了。
    欢迎指正。

    	我们可以发现router.push跟 window.history.pushState和 window.history.go好像, 实际上它们确实是效仿 window.history API 的。
    
    展开全文
  • 组件间传递参数的几种方式 父组件向子组件传递 // 父组件 <template> <center-template :form='userinfo'></center-template> </template> <script> import CenterTemplate from '.....
  • vue axios get/post 请求 数组参数 搜索功能含多选就涉及到数组参数传递,比如 id=[1,2,3,4],后台接收的参数类型为 id=1&id=2&id=3$id=4,引入qs对传递参数进行处理 get请求:对参数params进行处理 ...
  • 记录下Vue中父子组件中的参数传递组件向子组件传递参数(props) App.vue <template> <Test @sub-event="onTestClick" :url="theme6" /> </template> <script> import Test from './...
  • vue组件参数传递命名

    2018-10-12 15:29:23
    断点调试也没有值,后来打开控制台发现警告信息,html语句中不识别大写字母,再一看,参数是驼峰命名,难不成是这个问题,遂百度之,确实如此,html中不支持大下写,所以父组件传值的时候,参数名应该用短横线连接。...
  • vue 父子组件之间参数传递

    千次阅读 2019-12-03 17:20:27
    1.父组件.vue 文件 <template> <div class="hello" style="margin: 500px 200px"> <DialogWeb ref="dialog" :msg="msg"></DialogWeb> <h3> 我 是 父 组 件</h3>...
  • router-link方式传参 ...组件中跳转传参 :to="{name:‘MusicPlay’,params:{songid:item.song_id}}" <router-link tag="div" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="card u...
  • 今天趁完成任务的缝隙时间,总结了一下这几天用到的在VUE组件之间的参数调用,以及调用另外一个页面的函数的方法,有任何的问题也会不断的更新修改。 (1)父级调用子级的函数 场景:两个vue页面:one.vue和two....
  • 主要为大家详细介绍了vue-router实现组件间的跳转,参数传递方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VUE组件数据传递方法

    千次阅读 2018-08-10 18:01:35
    兄弟组件或者子组件执行了某个操作之后,需要在另外一个A组件中执行刷新操作(某个方法)   解决思路: 1.如果是父子组件,可以用事件来处理,on,emit 2.我这个更普遍一点,不一定是父子组件的关系,这里有一...
  • Vue 组件间函数调用,事件传递

    万次阅读 2018-09-09 23:07:01
    注明: 采用了一个很 low 的方法 来实现任意组件间的函数调用,也可以说是事件传递。 子组件调用父组件函数 在子组件中可以 通过 emit 函数触发父组件中自定义的事件,通过事件绑定调用父组件函数。 父组件调用子...
  • 1.props属性:在父组件中,可以通过...一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据缺点:隔层组件间传递: 必须逐层传递(麻烦)兄弟组件间: 必须借助父组件(麻烦...
  • Vue中,我们使用props向子组件传递数据 父组件中: var vm = new Vue({ el: '#app', data: { msg: '我是父组件 ' }, methods: { } }); 子组件中: 在使用组件的时候,使用v-bind属性将mymsg的值绑定为父...
  • 组件接收父组件参数的时候,...你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验。 <child content=hello></child> Vue.component('child',{ props: ['
  • Vue组件间的通信

    千次阅读 2018-09-10 10:52:40
    Vue组件间的通信,大致分为以下几种:  1. 使用props属性。  props主要用于父组件传递数据给子组件,是你可以在组件上注册一些自定义特性。当一个值传递给一个prop特性的时候,它就变成了那个组件实例的一个属性...
  • vue 组件之间数据传递

    千次阅读 2018-03-16 14:05:08
    传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件传递给子组件需要使用 =&gt;props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue&lt...
  • 这个正向的数据传递vue组件中就是通过props来实现的。 子组件 <template> <div> {{title}} </div> </template> <script> export default { props: ['tit
  • 组件监听父组件传递参数变化
  • Vue父子组件之间的参数传递

    千次阅读 2020-09-06 18:06:25
    组件之间的参数传递——父传子 1原理说明 2代码 3效果 二组件之间的参数传递——子传父 1原理说明 2代码 三以事件发射的方式实现子传父 1原理 2代码 3效果 一组件之间的参数传递——父传子 1原理说明 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,381
精华内容 15,752
关键字:

vue组件间参数传递的方法

vue 订阅