vue 组件传值

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！