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!