vue 组件传值

vue 专栏收录该内容
19 篇文章 0 订阅

vue 组件传值,总结起来,有五种方法。

第一种:props,父页面给模板页传值,页面加载后就会执行。父页面:

<!--App.vue-->
<template>
  <div id="app">   
      <Shop :sub="city"/>
      <!-- 可传多个值:<Shop :sub="[city,tab]" -->
  </div>
</template>
<script>
    import Shop from './components/shop';
    export default {
        components:{    
          Shop
        },
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"]
            }
        }
    }
</script>

模板页:

<!--shop.vue-->
<template>
	<div class="shop">
		<div class="city"><span v-for="item in sub">{{item}}</span></div>
    </div>
</template>
<script>
    export default {
        props:['sub']
    }
</script>

 第二种:ref,父页面给模板页传值,需要事件响应。父页面:

<!--App.vue-->
<template>
  <div id="app">   
      <Shop ref="refA"/>
      <!-- 不支持多个ref <Shop ref="refA" ref="refC"/> -->
      <div class="local" v-for="(item,index) in city">       
        <span  @click="refShow(index)">{{item}}</span>
      </div>
  </div>
</template>
<script>
    import Shop from './components/shop';
    export default {
        components:{    
          Shop
        },
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"]
            }
        },
        methods:{  
            refShow(i){               
                this.$refs.refA.refB(this.city);   
                //可传多个值:this.$refs.refA.refB([this.city,i]);          
            }
        }
    }
</script>

模板页:

<!--shop.vue-->
<template>
	<div class="shop">
		<div v-show="city.length"><span v-for="item in city">{{item}}</span></div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                city: []
            }
        },
        methods:{
			refB(i){
				this.city = i;				
			}			
		}
    }
</script>

第三种:emit,模板页传值给父页面,需要事件响应。模板页:

<!--shop.vue-->
<template>
  <div class="shop">   
      <div class="city"><span v-for="(item,index) in citys" @click="emitDemo(index)">{{item}}</span>
  </div>
</template>
<script>
    export default {
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"]
            }
        },
        methods:{			
			emitDemo(i){
				this.$emit("emitA",i);
                //可传多个值:this.$emit("emitA",[i,this.citys]);
			}
		}
    }
</script>

父页面:

<!--App.vue-->
<template>
  <div id="app">   
      <Shop @emitA="emitB"/>
      <!-- 多个也可以:<Shop @emitA="emitB" @emitC="emitD"/> -->
      <div v-show="cityIndex != -1"><span></span>{{cityIndex}}</div>
  </div>
</template>
<script>
    import Shop from './components/shop';
    export default {
        components:{    
          Shop
        },
        data(){
            return{
                cityIndex:-1,
            }
        },
        methods:{ 
            emitB(i){
                this.cityIndex= i;           
            } 
        }
    }
</script>

第四种,通过路由传值,父页面

<!--App.vue-->
<template>
  <div id="app">
     <router-link :to="{name:'index',params:{userName:author},query:{cityName:city}}">首页</router-link> 
    <!-- http://localhost:5006/#/?cityName=%E5%8C%97%E4%BA%AC&cityName=%E4%B8%8A%E6%B5%B7&cityName=%E5%B9%BF%E5%B7%9E&cityName=%E9%A6%99%E6%B8%AF--->
  </div>
</template>
<script>
    export default {
        data(){
            return{
                author:"marc",
                city: ["北京", "上海", "广州", "香港"]
            }
        }       
    }
</script>

子页

<!--shop.vue-->
<template>
	<div class="shop">		
        <p>params参数:<span>{{$route.params.userName}}</span></p>
        <p>query参数:<span>{{$route.query.cityName}}</span></p>		
    </div>
</template>

第五种,vuex。通过父页面 onload 或者事件响应传递参数, store 设置 state 值,再在子页取 state 值。

父页面:

<!--App.vue-->
<template>
  <div id="app">   
      <Shop/>
      <div class="city"><span v-for="(item,inex) in city" @click="transferItem(item)" :key="index">
  </div>
</template>
<script>
    import Shop from './components/shop';
    export default {
        components:{    
          Shop
        },
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"]
            }
        },
        methods:{ 
            transferItem(i){
                this.$store.commit('setCity',i);
                //同样可以:this.$store.dispatch('setCity',i);
            }
      }
    }
</script>

store >> index.js

<!-- store >> index.js -->
const store = new Vuex.Store({
	state: {
		city: ""		
	},
	getters: {		
		city: state => state.city			
	},
	mutations: {		
		setCity(state, flag) {
			state.city = flag			
		}
	},
	actions: {	
		/* 同样可以:
		setCity({
			state,
			commit,
			dispatch
		}, hash) {
			state.city = hash;
		}*/
	}
})

export default store

子页:

<!--shop.vue-->
<template>
	<div class="shop">
		<div class="city">{{city}}</div>
    </div>
</template>
<script>
    import {mapState,mapGetters} from "vuex"
	export default{
		computed:{	
			...mapState(['city']),	
			//同样可以:  ...mapGetters(['city'])   
		}		
	}
</script>

如果有幸帮到你,帮忙到个人主页 Star 一下 :https://github.com/mark-tang

听说 Star 的人马上升职加薪!Skr - skr!

  • 5
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值