精华内容
下载资源
问答
  • vue传值到另一个页面

    千次阅读 2018-08-07 20:13:09
    声明式:<...这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接B组件并且传参数。 1、router.push使用 router/index.js export default new Router({ routes: [ { path: '/', na...

    声明式:<router-link :to="...">

    编程式:router.push(...)

    这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数。

    1、router.push使用

    router/index.js

    export default new Router({
     routes: [
       {
       path: '/',
       name: 'A',
       component: require('../components/A')
      },
      {
       path: '/B/:name/:age',
       name: 'B',
       component: require('../components/B')
      }
     ]
    })


    A组件,绑定一个@click事件,跳转B组件传参 使用params上边,在路由中为B组件添加两个参数 name ,age

     

    这时浏览器会显示 :http://localhost:8080/#/B/xy/22

    在看下query  传值及地址变化

    同样在 router/index.js路由文件中 不变有两个参数name,age

    <template>
     <div> <!---只允许有一个最外层标签 !-->
      <div>
       <p>{{message}}</p>
       <p @click="toBFun">跳转B组件啊啊</p>
       <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件啊啊</router-link>-->
      </div>
     </div>
    </template>
    <script>
     export default {
      data: function () {
       return {
        message: 'vue'
       }
      },
      methods: {
       toBFun: function(){
        this.$router.push({name:'B',params:{name:'xy',age:22}});
       }
      }
     }
    </script>
    <style>
    
    </style>
    {
      path: '/B/:name/:age',
      name: 'B',
      component: require('../components/B')
     }

    在A组件中,之前参数传递是通过params,

    this.$router.push({name:'B',params:{name:'xy',age:22}});

    替换后,query

    this.$router.push({name:'B',query:{name:'xy',age:22}});
    

    这时浏览器会发现:http://localhost:8080/#/?name=xy&age=22

     通过以上两种,页面刷新后,参数还会保留的。获取值有些不相同:

    params:this.$route.params.name;
    
    query:this.$route.query.name;

    ------------------------ 还有种方式--------------------------------------------

     使用 router-link

    <router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>

    跳转后,浏览器地址为:http://localhost:8080/#/B?name=zzz&age=22

    跟  this.$router.push(...) 是一样的

    <router-link :to="{path:'/B/123'}">
       跳转B组件</router-link>
     </div>
    {
       path: '/B/:name',
       name: 'B',
       component: require('../components/B')
      }

    取值

    this.$route.params.name

     

    展开全文
  • 页面:子组件传递页面export default {name: ‘child‘,data() {return {msg:‘子组件数据‘}},computed:{addNum(){return this.num*5}},methods:{sendMsg(event){this.$emit(‘sendmsg‘,this.msg)this.$emit...

    子页面:

    子组件

    传递到父页面

    export default {

    name: ‘child‘,

    data() {

    return {

    msg:‘子组件数据‘

    }

    },

    computed:{

    addNum(){

    return this.num*5

    }

    },

    methods:{

    sendMsg(event){

    this.$emit(‘sendmsg‘,this.msg)

    this.$emit(‘addnum‘,this.addNum)

    }

    },

    props:{

    num:{

    type:Number,

    default:5

    }

    }

    }

    父页面:

    父组件

    {{info}}

    {{num}}

    import child from ‘./child‘

    export default {

    name: ‘parent‘,

    data() {

    return {

    info:‘‘,

    num:10

    }

    },

    components:{

    child

    },

    methods:{

    getMsg(data){

    this.info = data

    },

    getNum(data){

    this.num = data

    }

    }

    }

    原文:https://www.cnblogs.com/qiyc/p/9113897.html

    展开全文
  • vue传值

    2020-11-04 21:28:28
    vue传值的几种方法 在vue开发过程中,组件是必不可少的。由于页面通常有多个组件组成,所以需要一些组件之间传值方法,本文将从以下几个常用的传值方式来给出一定的传值示例 父子传值 父传子 父组件引入子组件 父...

    vue传值的几种方法

    在vue开发过程中,组件是必不可少的。由于页面通常有多个组件组成,所以需要一些组件之间传值方法,本文将从以下几个常用的传值方式来给出一定的传值示例

    父子传值

    • 父传子
    1. 父组件引入子组件
    2. 父组件通过v-bind动态赋值
    3. 子组件通过props 接收父组件传过来的值
    • 子传父
    1. 子组件通过点击事件触发$emit(“函数名”,参数1,参数2)
    2. 父组件中引入的子组件需要自动监听由子组件"注册"的 'sonChange’事件,然后调用receive方法来更改数据
    <!-- 父组件->
     <son :propdata = prop @sonChange="receive" ></son>
    import son from '../components/son.vue'
    data:function(){
    	return {
    		prop:"父传子"
    	}
    }
    methods:{
    	receive:function(flag,num){
    		//接收子组件传来的两个值
    		console.log(flag,num)
    	}
    }
    <!-- 子组件->
    <div>{{counter}}</div>
    <botton @click=Change>点击跟改</botton>
     props:["prop"]
     data:function(){
    	counter: this.prop
    }
    methods:{
    	Change:function(){
    		let flag = true
    		let num = 1
    		//传多个值给父组件
    		this.$emit("sonChange",flag,num)
    	}
    }
    

    将一个对象所有的属性都传过去 ,可以使用不加参数的v-bind

    post: {
      id: 1,
      title: 'My Journey with Vue'
    }
    v-bind="post"
    

    注意:props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值,Vue 警告。

    ref和$refs的传值

    • ref

    ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。

    • $refs

    $refs 是一个对象,持有已注册过 ref 的所有的子组件

    1、ref 加在普通的元素上,用this.$ref.name获取到的是dom元素

    2、ref 加在子组件上,用this.$ref.name获取到的是组件实例,可以使用组件的所有方法。

    代码演示

    <!--父组件-->
     <son  ref="monitorFactor" @popChange="popChange"  ></son>
     //点击触发add函数
      add:function (){
    	 this.$nextTick(()=>{
    	//通过使用$refs可以获取子组件的init 函数 将team 与true传给子组件
             this.$refs.monitorFactor.init(team,true)
         })
    },
    ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用,或者在 this.$nextTick(()=>{})中调用。
    
    <!--子组件-->
     init(team,flag){
     		//接收到值
          console.log("flag:",flag)
        }, 
      
    

    兄弟传值

    非父子传参,需要有共同的父组件。需要定义公共的公共实例文件,作为中间仓库。不然达不到传值效果。

    //main.js
    var bus = new Vue();
    Vue.prototype.bus = bus;
    
    //兄弟组件
    bus.$emit('val',flag) //传值
    bus.$on('val',(flag)=>{ console.log(data)})  //接收值
    

    vuex传值

    1 src新建一个vuex文件夹
    2 vuex文件夹里新建一个store.js
    3 安装vuex cnpm install vuex --save
    4 在刚才创建的store.js 中引入vue、vuex 引入vuex 并且use

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    

    5 定义数据 state在vuex中用于存储数据

    var state = {  count:1,}
    

    6 定义方法 mutations里边放的是方法,方法主要用于改变state里边的数据

    var mutations = {
        incCount(){
                ++state.count;
       }
    }
     //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
    var getterfl={
             completedCountChange(state){
             return state.count * 2 +'位';
            }
        }
    

    Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作

    var actionfl = {
      asynIncCount(context){  
    //因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
          context.commit('incCount');
      }
    }
    

    7 实例化 vuex

    const store = new Vuex.Store({
                state,//state: state  简写
                mutations: mutations,//属性的简写是 mutations
        getters:getterfl,
           actions:actionfl,
    })
    

    8 对外暴露

    export default  store;
    

    9 在需要用的地方引入

    import store from '../vuex/store.js'
    

    10 注册store ,放在methods,data同级

    export default {
        data(){
            return{}
        },
        store:store,
        methods:{
            incCount(){
                this.$store.commit('incCount');
            }
        }
    }
    

    11 使用vuex

    使用数据: this.\$store.state.count
    调用方法: this.$store.commit('incCount');
    

    12.适用场景
    父子组件、兄弟组件、无关系组件任意组件之间的传值

    Vuex本质上也是一种本地存储,比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化,所以就会被在浏览器中获取到。

    展开全文
  • vue传值大全

    2019-03-14 17:46:52
    vue组件传值大全

    1.父组件传值子组件

    父组件:

    <template>
      <div>
        父组件:
        <input type="text" v-model="name">
        <br>
        <br>
        <!-- 引入子组件 -->
        <child :inputName="name"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        }
      }
    </script>
    

    子组件:

    <template>
      <div>
        子组件:
        <span>{{inputName}}</span>
      </div>
    </template>
    <script>
      export default {
        // 接受父组件的值
        props: {
          inputName: String,
          required: true
        }
      }
    </script>
    

    2.子组件传值父组件
    子组件:

    <template>
      <div>
        子组件:
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    

    父组件:

    <template>
      <div>
        父组件:
        <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>
    

    3.非父子组件传值
    公共bus.js

    //bus.js
    import Vue from 'vue'
    export default new Vue()
    

    组件A

    <template>
      <div>
        A组件:
        <span>{{elementValue}}</span>
        <input type="button" value="点击触发" @click="elementByValue">
      </div>
    </template>
    <script>
      // 引入公共的bug,来做为中间传达的工具
      import Bus from './bus.js'
      export default {
        data () {
          return {
            elementValue: 4
          }
        },
        methods: {
          elementByValue: function () {
            Bus.$emit('val', this.elementValue)
          }
        }
      }
    </script>
    

    组件B

    <template>
      <div>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{{name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0
          }
        },
        mounted: function () {
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }
    </script>
    

    注意
    1.A页面点击,只会触发一次
    2.当涉及到页面切换时,在A页面,点击‘点击触发’按钮。重复几次,会发现B页面会多次打印’data’,具体是,每切换一次页面,点击按钮的时候,就会多打印一次

    对应上面情况。1是正常的,是我们想要的结果,2就是坑了

    为什么会出现这种情况呢?按照上述情况,我的猜想是每次组件挂载后,点击‘未审核按钮’使用$emit都会建立的一个新的消息机制,而组件销毁时这个消息机制一直未被销毁。不停的切换页面,会不断的挂载和销毁组件,如果每切换一次页面就点一次按钮,就会创建一个新的消息机制,不断的创建而不销毁,导致B组件接受事件里的操作重复触发,控制台重复多次打印data

    解决办法:
    上面的逻辑想通了,解决的办法就很简单,在每次页面销毁前,去销毁这个消息机制。
    Bus.$off();

    在A页面:

    beforeDestroy() {
     Bus.$off();
    }
    

    重复解决了。

    由于作者水平有限,如有表达不清或者其他错误还望指正。

    展开全文
  • 下面本篇文章给大家介绍一下vue.js中父传子的传值方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 ...
  • vue传值为空问题

    千次阅读 2019-06-18 16:58:18
    vue父组件异步获取动态数据传递给子组件 获取不值的问题已完美解决 附demo:https://www.jianshu.com/p/4450b63a27fe ...由于vue传值时数据会更新,在一些时候传递的值会出现为空的情况,且created生命周期只...
  • Vue传值—特殊的eventBus(无惧页面刷新版) 前言 上一篇文章我介绍了我那特殊的eventBus,但是后来我发现了它的弊端,以至于它在我内心当中的形象一落千丈,降落什么程度呢,它的高度只比路由传值当中params高一...
  • 6.Vue传值思路

    2019-07-30 11:32:50
    Vue小白笔记6——传值思路
  • vue之组件传值的几种方式前言一、父子组件传值二、子组件通过emit来触发父组件的自定义事件三、兄弟之间通过bus总结 前言 vue的组件传值分为三种方式:父传子、子传父、非父子组件传值 引用官网的一句话:父子组件的...
  • vue传值方式

    千次阅读 2018-03-19 10:09:04
    一、路由传值//params使用场景 router.push('/users/123') // 跳转时 router.push({ // 另一种方式跳转 name: 'users', params: { id: 123 } }) // 获取id route.params.id // 123 // 实际URL地址 =&gt; ...
  • Dialog in Vue 传值

    千次阅读 2018-10-24 18:17:50
    ... &lt;xx-dialog v-if="dialogData" :dialog-data="dialogData"/&...父控件绑定动态值Dialog,Dialog第一次展示未能接收值,第二次打开Dialog才能接收值。...
  • vue传值方式优劣对比

    2021-04-02 21:14:18
    路由传值的话: 当前页面刷新的时候,传递的数据会变的没有。
  • Vue传值—特殊的eventBus 前言 作为一枚前端小白发布了我的第一篇博文,主要说说我心掌握的一种传值技巧,特殊的eventBus,是一种对eventBus的修改版,下面我就将这种技巧传递给更多还不知道此技巧的人哈哈哈。 简略...
  • iframe给Vue页面传值 第一步:需要在iframe的index.html 的js 加入下面代码 <!DOCTYPE html> <!-- Generated by PHPWord --> <html> <head> <meta charset="UTF-8" /> <...
  • 1.iframe页面vue页面传值 vue代码 <template> <div> <iframe id="iframe"></iframe> </div> </template> <script> export default { data(){ return { ...
  • 效果
  • vue 传值(父子组件)

    2019-09-22 16:54:02
    这个页面为Item.vue,我们需要用userDialog 的东西 首先import userDialog from '组件目录地址' 然后在Item.vue的component中引入 在页面写入这个路由 <user-dialog v-if="userVisible" ref="userDialog" @...
  • vue传值方式总结 (十二种方法)

    千次阅读 多人点赞 2021-04-23 20:21:55
    name=danseek’)B页面可以使用this.route.query.name 来获取A页面传过来的值 上面要注意router和route的区别 使用冒号传值 配置如下路由: { path: '/b/:name', name: 'b', component: () => import( '../views/B....
  • Vue传值的多种方式

    千次阅读 2018-07-25 16:35:49
    1.通过路由带参数进行传值 两个组件A和B,A组件通过query把numId传递给B组件(触发的事件可以是点击事件、钩子函数等) this.$router.push({path:'/conponentsB',query:{numId:123}}) //跳转...
  • Vue传值

    2021-07-05 10:52:03
    传值 通过路由带参数进行传值。 通过设置Session Storage 缓存的形式进行传值。 // A组件缓存user const user = { 'name': 'Lucy', 'age': 18} sessionStorage.setItem('缓存名称', JSON.stringify(user)) // B...
  • 各位大佬,前端vue小白,现在已经获取要key,vue要怎么写帮这个值传给后台并返回查询的数据。 前端 ``` methods: { viewInfo(data) { if (data && data.length > 0 && data[0].leaf) { this....
  • HTML页面Vue页面传值

    2021-02-26 13:55:40
    但是难免会有.html页面vue项目传值的场景。本节将介绍html项目利用JavaScript向vue项目传值。 1:HTML页面传递事件 可以随便写一个用于跳转的事件。如下: <!DOCTYPE html> <html lang="en"> <...
  • 1 跳转页面传值方法1: this.$router.push(‘这个里面写的就是要跳转的路由地址,记住前面加上斜杠,代表绝对路径’,query:{key:value}) 跳转页面获取传过来的数据的方法:this.$route.query.key 这种方法会...
  • vue路由传值页面没有实时更新怎么解决? 我们在vue项目中,使用路由传参时,根据传递不同的参数值获取不同的数据时,如果只是地址栏的参数发生变化,而数据并没有实时的进行更新,需要刷新页面才会显示新的数据,如何...
  • VUE从一个页面传值到另一个页面

    千次阅读 2020-10-25 11:45:40
    VUE从一个页面传值到另一个页面
  • 本文分享自华为云社区《【Vue棘手问题解决】项目实现JS向Vue传值》,原文作者:SHQ5785 。 前言 项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令。自定义拖拽指令规定了根据用户...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,100
精华内容 6,040
关键字:

vue传值到页面

vue 订阅