精华内容
下载资源
问答
  • 页面之间传值 父主页面: private goToProduct(typeId): void { console.log("typeId",typeId) this.$router.push({ path: "/helper/product", query: { typeId: typeId }}); } 要跳转的子页面: private ...

     

    页面之间传值

    父主页面:

    private goToProduct(typeId): void {
    	console.log("typeId",typeId)
        this.$router.push({ path: "/helper/product", query: { typeId: typeId }});
      }

    要跳转的子页面:

    private productRec(): void {
    			this.typeId = this.$route.query.typeId
    			console.log("goToProduct-typeId",this.typeId)
    			this.getDocProduct()
    		}

     

    父组件传值子组件:

    需求1:假设要把父组件的zhuli传值到这是用户的详细信息(红色区域),该如何操作?

    (已知)标签上可以写自定义属性,在使用标签的时候,告诉子组件使用哪些标签,子组件中用props定义可以使用的属性,可以传多个属性。

    在父组件使用的子组件标签中绑定自定义属性:

    <app-user-detail :myName="name"></app-user-detail>

    在子组件中使用props(可以是数组也可以是对象)接受即可。

    export default {
        props: ['myName']
    }
    

    注意的点:

    自定义的属性最好使用中划线写法,my-name,在正常的vue实例中(没有使用vue-cli)中不支持驼峰式写法myName,因为vue-cli中是有vue-template-compiler插件支持,正常的vue实例中没有,会报错。

     

    需求2:改变传过来的值

    直接使用函数修改的话,可以修改成功,但会报错,容易造成数据流混乱。我们应该使用data字段,先把传过来的值赋值给一个变量,再更改那个变量。

    export default {
        props: ['myName', 'age'],
        data() {
            return {
                name : this.myName    // 把传过来的值赋值给新的变量
            }
        },
        methods: {
            changeName: function() {   // 函数需要执行
                this.name = 'huayong'  // 然后再修改值
            },
        }
    }
    

    props验证

    可以把props写成一个对象。没有通过则提前报错。

    自定义属性后面可以直接写类型(基础验证),如允许多种类型,可以写成数组;也可以写成对象(复杂验证,没有传值的时候可以使用默认值)。

    props: {
        myName: {
            type: String,
            // required: true,   // 如果为true则代表必须传值
            default: 'xiaoming', // 没有传值则使用默认值,和required二选一
            },
        age:[Number, String, Array]
    },
    

    注意点: 如果类型是Object,default要写成函数

    props: {
        myName: {
            type: Object,
            default() {
                return {
    
                }
            }
       },
       age:[Number, String, Array]
    },
    

    子组件传值父组件:(有两种方法)

    需求: 点击子组件(红色区域)的button按钮,可以改变父组件的值。

    this.$emit('')可以触发一个自定义的事件

    第一种方法:(推荐)

    第一步: 在子组件中绑定一个函数

    <p><button @click="changeParentName">改变父级的name</button></p>
    

    第二步: 在子组件中定义函数,再函数中自定义一个事件

    export default {
        methods: {
            changeParentName: function() {
                this.$emit('changeParentName', 'xiaohong') // 触发一个自定义事件并传参xiaohong
            }
        }
    }
    

    第三步: 绑定在父组件中

    <app-user-detail  @changeParentName="changeName"></app-user-detail>

    第四步: 在父组件中写一个事件函数

    export default {
        data() {
            return {
                name: 'zhuli',
                age: 10,
            }
        },
        components: {
            'app-user-detail': UserDetail,
            'app-user-edit': UserEdit,
        },
        methods: {
            changeName: function(name) {  // name形参是子组件中传入的值
            this.name = name
            },
        }
    }
    

    第二种方法:

    第一步: 先在父组件中写一个callback函数

    export default {
        data() {
            return {
                name: 'zhuli',
                age: 10,
            }
        },
        components: {
            'app-user-detail': UserDetail,
            'app-user-edit': UserEdit,
        },
        methods: {
            callback: function(name) {
                this.name = name
            }
        }
    }
    

    第二步: 把callback函数传过去

    <app-user-detail :callback="callback"></app-user-detail>

    第三步: 在子组件中接收callback函数

    props: {
        callback: Function,
    },
    

    第四步: 点击父级button按钮的时候,执行callback函数

    <p><button @click="callback('小红')">改变父级的name</button></p>

    成功。推荐使用第一种

     

    兄弟组件间传值:

    第一种方法:

    第一步: 在父组件中给要传值的兄弟两个都绑定要传的变量。

    <app-user-detail :age="age"></app-user-detail>
    <app-user-edit :age="age" @editAge="changeAge"></app-user-edit>

    第二步: 在要传值得组件中接受变量和绑定触发事件

    <template>
        <div>
            <h3>用户编辑页面</h3>
            <p>编辑用户</p>
            <p>年龄: {{ age }}</p>
            <p><button @click="changeAge">编辑年龄</button></p>
        </div>
    </template>
    <script>
    export default {
        props: ["age"],
        methods: {
            changeAge: function() {
            this.$emit('editAge', 20)   // 触发自定义事件并传值
            }
        }
    }
    </script>

    第三步: 在父组件中绑定要传组件中的自定义事件

    export default {
        data() {
            return {
                name: 'zhuli',
                age: 10,
            }
        },
        components: {
            'app-user-detail': UserDetail,
            'app-user-edit': UserEdit,
        },
        methods: {
            changeAge: function(age) {
                this.age = age
            },
        }
    }
    

    总结: 当要传值的组件改变了父组件的变量,父组件又可以把改变的值传值所绑定变量的组件,实现兄弟间传值。

    第二种方式: 和上面子组件传值父组件一样,使用一个函数,再函数中传参使用。

    小结: 这两种方式的缺点是嵌套层级深,不好处理。

    第三种方式: 后续应该使用vuex

    第四种方式: 思想: 既然要借助父级,那么可不可不定义一个全局事件

    第一步: 在入口文件main.js里暴露一个vue实例

    export const EventBus = new Vue() // 暴露一个vue实例
    

    第二步: 在要传值的文件里导入vue实例模块,age使用自己的变量,再定义一个全局触发事件函数,触发事件函数绑定在一个button上

    <template>
        <div>
            <h3>用户编辑页面</h3>
            <p>编辑用户</p>
            <p>年龄: {{ age }}</p>
            <p><button @click="changeAge">编辑年龄</button></p>
        </div>
    </template>
    <script>
    import { EventBus } from "../main.js"
    // 导入模块
    export default {
     // props: ["age"],
     data() {
         return {
             age: 10,
         }
        },
      methods: {
          changeAge: function() {
              this.age = 20
              EventBus.$emit("editAge", this.age)
              // 触发全局事件 并且把改变后的值传入事件函数
              // console.log(EventBus)
          }
        }
    }
    </script>

    第三步: 在要被传入值得组件中也导入vue实例模块,也不使用父组件中传过来个age,自己重新定义,创建一个初始化的钩子函数,再使用created钩子函数中使用传值组件的全局定义事件。

    import { EventBus } from "../main.js"
    export default {
        data() {
            return {
                name : this.myName,
                age: 10
            }
        },
        methods: {
            changeParentName: function() {
                this.$emit('changeParentName', 'xiaohong')
                // this.$emit('')触发自定义事件
            },
         created() {
             EventBus.$on('editAge', (age) => { // 使用$on去绑定事件
                 this.age = age // 使用es6写法,this刚好指向父级
             })
         }
    }
    

    总结: 现在兄弟之间传值,都没有通过父组件

     

     

     

    展开全文
  • VUE页面之间传值的方式

    千次阅读 2018-07-23 19:59:51
    在 .vue文件中路由跳转的部分加上 thiz.$router.push({ path: '/epmsFrame/configcenter/batchDeliveryManage/batchDeliveryPO/' + thiz.batchDeliveryId}); 在接收的页面添加 thiz.batchDeliveryId =...

    1.传数组  2.传字符串

    1.传数组

    转换成json 持久化

    
        setBatchDelivery(state, bo){
          state.batchDelivery = bo;
        }
    
        configCenterInfo:{
          contractIds:[],
        },

     

                let data = {
                    contractIds : thiz.contractIdList,
                };
                thiz.$store.commit({
                    type: 'setConfigCenterInfo',
                    data: data  
                });            
                localStorage.configCenterInfo=JSON.stringify(thiz.$store.state.configCenterInfo);
        mounted(){
            let thiz = this;
            thiz.form.contractIds = JSON.parse(localStorage.getItem('configCenterInfo')).contractIds;
            // alert(thiz.form.contractIds);
        },

     

    2.传字符串

    在配置路由的js文件中修改路由,末尾加上  /:

    
                    {
                        path:'batchDeliveryPO/:batchDeliveryId',
                        component: batchDeliveryPO
                    },

    在 .vue文件中路由跳转的部分加上

    thiz.$router.push({ path: '/epmsFrame/configcenter/batchDeliveryManage/batchDeliveryPO/' + thiz.batchDeliveryId});
    

    在接收的页面添加

    thiz.batchDeliveryId = this.$route.params.batchDeliveryId;

     

    展开全文
  • //传值 goInfo:function(id){ this.$router.push({name: 'clear', params: {id: id}}) } //接收 this.$route.params.id 路由配置 {path: '/cleaning/:id', component: cleaning,name: 'clear'}, ...

    //传值

    goInfo:function(id){
           this.$router.push({name: 'clear', params: {id: id}})
    }

     

    //接收

    this.$route.params.id

     

     

    路由配置

     {path: '/cleaning/:id', component: cleaning,name: 'clear'},

    展开全文
  • VUE页面传值 通过Session Storage缓存的形式进行传递(亲测有效) 两个组件A和B,在A组件中设置缓存data const data= { name: "zhangsan" }; sessionStorage.setItem("name", JSON.stringify(data)); //这里的...

    VUE页面传值

    通过Session Storage缓存的形式进行传递(亲测有效)

    1. 两个组件A和B,在A组件中设置缓存data
    	const data= { name: "zhangsan" };
        sessionStorage.setItem("name", JSON.stringify(data));  //这里的name是设置的缓存名字
    
    1. B组件获取A组件设置的缓存data
    	const data = JSON.parse(sessionStorage.getItem("name"));  //name是从A组件获取到的缓存
    

    这里是用的sessionStorage,也可以看看localStorage

    展开全文
  • 两个vue项目之间传值 实际用到的地方:单点登录 因为这是两个项目,比方说a项目服务器地址是1.1,b项目服务器地址是1.2,那么cookie和localstroge就不能用了,因为你不管在1.1项目里面怎么存,在1.2里什么都拿不到,...
  • vue页面之间传值

    千次阅读 2019-06-17 14:02:12
    Vue页面之间传值 1.一个页面传递参数到另一个页面 Index.vue页面代码 <template> <div> <v-navigation title="-专家平台" :menus="menus" url="/p"></v-navigation> <router-...
  • 记录菜鸟的vue学习之路(一):vue组件之间传值问题(emit方式) 一、在父组件(要获取参数值的页面)中注册子组件(将此页面值传递出去)二、在子组件中添加如下代码 其中getUserName为emit被触发时该事件的识别...
  • VUE页面之间传值

    2019-09-02 17:23:01
    VUE DEMO 之模拟登录 个人中心页面之间数据传值的基础上, 我稍微补充一下,并且添加效果图。 vue.js的路径要改成自己的路径; 跳转的路径也要改成自己的路径; 效果图如下: 跳转到: ...
  • eventBus 对于非父子组件的传值...在需要进行传值页面读引入这个Bus文件夹。 import Vue from 'vue' export default new Vue 在需要传值页面(组件)内通过$emit来触发一个自定义事件。 Bus.$emit("getCourse
  • 作者:易涵123来源:SegmentFault 思否社区问题多个组件通信问题EventBus传值,频繁会导致接口重复调用我以为eventBus是专门处理兄弟组件之间通信的,但是实际上,eventBus是专门处理同一个路由下的复杂组件之间通信...
  • vue富文本编辑器(可重复使用组件)vue-quill-editor),由于是新闻编辑页面,首先需要把已经保存好的新闻内容展示在富文本编辑器中(父组件向子组件传值),其次需要把更新后的新闻内容保存到数据库中(子组件向父...
  • vue页面之间相互传值的方法

    万次阅读 2019-04-26 09:48:50
    1、使用query传值--地址栏可见 比如从a.vue跳转至b.vue,传name=‘jack’,代码如下: this.$router.push({ path: "/result", query: { name: 'jack' } }); 在b.vue通过地址栏的url 进行接收参数; 我是在...
  • 在我们入门Vue的时候,不得不提到组件,在某些情况下,组件间需要互相传值,比如父组件需要向子组件传值,子组件需要向父组件传值,那么下面用一个实力来详细说明。效果:我们想实现这样一个效果,在输入框输入文字...
  • 一、父组件向子组件传值,通过props (1)使用方式一: 参考: https://blog.csdn.net/qq_42492055/article/details/82558971 (2)使用方式二: 使用elementUI的table组件作为子组件,父组件向table传数据: ...
  • 目标:实现A页面与B页面之间传值,并且将该值保存在B页面(即:从别的页面过来,或者刷新浏览器,B页面仍能显示该值)。 方式一:vue-router传值 说到页面传值,马上想到的就是通过router在页面跳转的时候,将值...
  • 第一种传参 name 与 结合使用params ,传参时需要配置路由 第二种传参 path 与 ...1.传值方式 //第一种 seeDetail(oid){ this.$router.push({name:"orderDetails",params:{id:oid}}); } //第二种 seeDetail(...
  • 1.父组件向子组件传值1⃣️.子组件标签绑定需要传递的参数名2⃣️....非父子组件进行传值 要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。总线/观察者模式公共b...
  • 一、父子组件之间传值1.父组件向子组件传值:子组件在props中创建一个属性,用以接收父组件传来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性在子组件中创建...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 327
精华内容 130
关键字:

vue页面之间传值

vue 订阅