Vue傳參一籮筐(頁面、組件)

import Vue from 'vue'
import Router from 'vue-router'

import componentsA from './components/componentsA' //在components下創(chuàng)建componentsA.vue
import componentsB from './components/componentsB' //在components下創(chuàng)建componentsB.vue
Vue.use(Router)

export default new Router({
	routes:[
		{
			path:'/componentsA',
			name:'componentsA',
			component:componentsA
		},
		{
			path:'/componentsB',
			name:'componentsB',
			component:componentsB
		}
	]
})

{
			path:'/componentsB/:name/:age/:sex',
			name:'componentsB',
			component:componentsB
		}

<template>
	<div>
		<div>我是組件A</div>
		<button @click='routerToB1'>方式一跳轉(zhuǎn)到組件B</button>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				person:{name:'Gene',age:'18',sex:'male'}
			}
		},
		methods: {
			routerToB1() {
				this.$router.push({
					path:`componentsB/${this.person.name}/${this.person.age}/${this.person.sex}`
				})
			}
		},
	}
</script>
<style>
</style>

<template>
	<div>
		<div>我是組件B</div>
	</div>
</template>
<script>
	export default{
		created(){
			this.getRouterData()
		},
		methods: {
			getRouterData(){
				const param = this.$route.params
				console.log(param)//{name:'Gene',age:'18',sex:'male'}
			}
		},
	}
</script>
<style>
</style>

<template>
	<div>
		<div>我是組件A</div>
		<button @click='routerToB1'>方式一跳轉(zhuǎn)到組件B</button>
		<button @click='routerToB2'>方式二跳轉(zhuǎn)到組件B</button>
	</div>
</template>

		routerToB2(){
				this.$router.push({
					name:'componentsB',
					params:{
						exa:'我是傳到組件B的參數(shù)'
					}
				})
			},

<template>
	<div>
		<div>我是組件A</div>
		<button @click='routerToB1'>方式一跳轉(zhuǎn)到組件B</button>
		<button @click='routerToB2'>方式二跳轉(zhuǎn)到組件B</button>
		<button @click='routerToB3'>方式三跳轉(zhuǎn)到組件B</button>
	</div>
</template>

routerToB3(){
				this.$router.push({
					name:'componentsB',// path:'/componentsB'
					query:{
						que:'我是通過query傳到組件B的參數(shù)'
					}
				})
			}

getRouterData(){
				const query = this.$route.query
				console.log(query)//{que: "我是通過query傳到組件B的參數(shù)"}
			}

<template>
	<div>
		<div>我是父組件</div>
		<children message1='我是直接參數(shù)' v-bind:message2='msg' :message3='obj'></children>
	</div>
</template>

<script>
	import Children from './children'
	export default{
		components:{
			Children
		},
		data(){
			return{
				msg:'我是父組件的參數(shù)'
			}
		},
		created(){
			this.obj = {a:'1',b:'2',c:'3'}
		}
	}
</script>

<style>
</style>

<template>
	<div>
		<div>我是子組件</div>
		<div>{{message1}}</div>
		<div>{{message2}}</div>
		<div>{{message3}}</div>
	</div>
</template>

<script>
	export default{
		props:['message1','message2','message3'],
		created(){
			console.log(this.message3)
		}
	}
</script>

<style>
</style>

<template>
	<div >
		<div>我是子組件</div>
		<div>{{message1}}</div>
		<div>{{message2}}</div>
		<div>{{message3}}</div>
		<button @click='ChildToParent'>點(diǎn)我傳愛</button>
	</div>
</template>

<script>
	export default{
		props:['message1','message2','message3'],
		data(){
			return{
				loud:'I love xx'
			}
		},
		methods:{
			ChildToParent(){
				this.$emit('emitToParent',this.loud)
			}
		},
		created(){
			console.log(this.message3)
		}
	}
</script>

<style>
</style>

<template>
	<div>
		<div>我是父組件</div>
		<div>大聲告訴我你愛誰：{{loveWho}}</div>
		<children @emitToParent='parentSayLove' message1='我是直接參數(shù)' v-bind:message2='msg' :message3='obj'></children>
	</div>
</template>

<script>
	import Children from './children'
	export default{
		components:{
			Children
		},
		data(){
			return{
				msg:'我是父組件的參數(shù)',
				loveWho:''
			}
		},
		methods:{
			parentSayLove(data){
				this.loveWho = data
			}
		},
		created(){
			this.obj = {a:'1',b:'2',c:'3'}
		}
	}
</script>

<style>
</style>

import Vue from 'vue'
export default new Vue()

import Bus from '../bus.js'

<template>
	<div>
		<div>我是first.vue</div>
		<button @click="firstToSecond">點(diǎn)擊傳值給second.vue</button>
	</div>
</template>

<script>
	import Bus from '../bus.js'
	export default{
		data(){
			return{
				msg:'我是first.vue傳到second.vue的參數(shù)'
			}
		},
		methods:{
			firstToSecond(){
				Bus.$emit('emitToSecond',this.msg)
			}
		}
	}
</script>

<style>
</style>

<template>
	<div>
		<div>我是second.vue</div>
		{{info}}
	</div>
</template>

<script>
	import Bus from '../bus.js'
	export default{
		data(){
			return{
				info:''
			}
		},
		mounted(){
			const that = this;
			Bus.$on('emitToSecond',function(data){
				that.info = data
			})
		}
	}
</script>

<style>
</style>

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import getters from './getters.js'
import actions from './actions.js'
Vue.use(Vuex)

export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './vuex'
Vue.config.productionTip = false

new Vue({
	store,
	router,
 render: h => h(App),
}).$mount('#app')

export default{
	city:'nanjing'
}

<template>	
  <div>
		<div>我是vuexA中city參數(shù)：{{city}}</div>
		<input type="text" :value="city" @change="change">
	</div>
</template>

<script>
	export default{
		methods:{
			change(e){
				this.$store.dispatch('setCityName',e.target.value)
			}
		},
		computed:{
			city(){
				return this.$store.getters.getCity
			}
		}
	}
</script>

<style>
</style>

<template>
	<div>
		<div>我是vuexB中的city參數(shù)：{{city}}</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			city(){
				return this.$store.state.city
			}
		}
	}
</script>

<style>
</style>

export default{
	setCityName({commit,state},name){
		commit('setCity',name)
	}
}

export default{
	setCity(state,name){
		state.city = name//設(shè)置新的值
	}
}

export default{
	getCity(state){
		return state.city//返回目前城市名稱
	}
}