Vue передает корзину ссылок

Vue.js
Vue передает корзину ссылок

Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，欢迎审阅补充。

1. Параметры маршрутизации

Параметры маршрутизации здесь программноrouter.push(...)Например, декларативный<router-link :to="...">Похоже на это. Смоделированный сценарий здесь взят изcomponentsA.vueПерейти на страницуcomponentsB.vueПараметры страницы. Во-первых, информация о конфигурации маршрутизации выглядит следующим образом:

router.js

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

import componentsA from './components/componentsA' //在components下创建componentsA.vue
import componentsB from './components/componentsB' //在components下创建componentsB.vue
Vue.use(Router)

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

1.1 Параметры конфигурации маршрута

Сначала определите имя параметра, который вы хотите передать, измените конфигурацию маршрутизации и передайте три параметра: имя, возраст и пол:

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

существуетcomponentsA.vueстраница черезthis.$router.pushНастройте соответствующие параметры:

componentsA.vue

<template>
	<div>
		<div>我是组件A</div>
		<button @click='routerToB1'>方式一跳转到组件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>

затем вcomponentsB.vueстраницаthis.$route.paramsПолучить параметры:

componentsB.vue

<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>

Нажмите кнопку «Режим 1, чтобы перейти к компоненту B», и распечатается страница компонентов B.{name:'Gene',age:'18',sex:'male'}, параметры, переданные со страницы А, успешно получены, а адресная строка отображается какlocalhost:8889/#/componentsB/Gene/18/male(Номер порта задается вами), что указывает на то, что этот URL-адрес метода передачи параметров будет содержать параметры.

1.2 параметры передачи параметров

Во-первых, восстановите измененную часть конфигурации маршрутизации прямо сейчас.componentsA.vueДобавьте кнопку на страницу «метод 2 переходит к компоненту B»:

componentsA.vue

<template>
	<div>
		<div>我是组件A</div>
		<button @click='routerToB1'>方式一跳转到组件B</button>
		<button @click='routerToB2'>方式二跳转到组件B</button>
	</div>
</template>

существуетmethodsдобавить методrouterToB2, используя атрибут маршрутаnameЧтобы определить соответствующий маршрут, используйте атрибутparamsпередать параметры:

componentsA.vue

			routerToB2(){
				this.$router.push({
					name:'componentsB',
					params:{
						exa:'我是传到组件B的参数'
					}
				})
			},

componentsB.vueОставаясь неизменным, для получения параметров также используется метод передачи параметров params.this.$route.params, нажмите только что добавленную кнопку на странице A «Режим 2 для перехода к компоненту B» и распечатайте ее на странице B.{exa: "我是传到组件B的参数"}, передача параметров прошла успешно, адресная строкаlocalhost:8889/#/componentsB, указывая на то, что URL-адрес не будет содержать параметры таким образом.

1.3 передача параметра запроса

Этот метод аналогичен методу передачи параметров params, вcomponentsA.vueСтраница продолжает добавлять кнопку «Mode 3 Jump to Component B»:

componentsA.vue

<template>
	<div>
		<div>我是组件A</div>
		<button @click='routerToB1'>方式一跳转到组件B</button>
		<button @click='routerToB2'>方式二跳转到组件B</button>
		<button @click='routerToB3'>方式三跳转到组件B</button>
	</div>
</template>

существуетmethodsдобавить методrouterToB3, используя атрибут маршрутаnameилиpathЧтобы определить соответствующий маршрут, используйте атрибутquery Чтобы передать параметры:

componentsA.vue

			routerToB3(){
				this.$router.push({
					name:'componentsB',// path:'/componentsB'
					query:{
						que:'我是通过query传到组件B的参数'
					}
				})
			}

существуетcomponentsB.vueстраница черезthis.$route.queryчтобы получить параметры:

componentsB.vue

			getRouterData(){
				const query = this.$route.query
				console.log(query)//{que: "我是通过query传到组件B的参数"}
			}

Посмотреть адресную строку какlocalhost:8889/#/componentsB?que=我是通过query传到组件B的参数, очевидно, таким образом URL-адрес будет содержать параметры.

1.4 Резюме

  • Обратите внимание на формат записи параметров конфигурации маршрутизации/:id, параметры получаются через$routeвместо$router
  • paramsУчастие и примирениеqueryРазница параметров аналогичнаpostа такжеgetметод.paramsВ адресной строке параметров не будут отображаться параметры, ноqueryПередача параметров отобразит параметры в адресной строке
  • paramsПри передаче параметров для обновления страницы параметры будут потеряны, а два других не будут
  • paramsАтрибут маршрута, соответствующий параметру,name,а такжеqueryАтрибут маршрута, соответствующий параметру, может быть либоname,так же может бытьpath

2. Используйте кеш

Метод кэширования черезsessionStorage,localStorage,CookieСпособ передачи параметров, этот способ никак не связан с тем, используется Vue или нет, так что не будем об этом.

3. Передача значений между родительским и дочерним компонентами

Создайте родительский компонент в каталоге компонентовparent.vueи подкомпонентыchildren.vue, который вводит дочерний компонент в родительский компонент. Для удобства демонстрации добавьте его в конфигурацию роутинга/parentдорожка.

3.1 Родительский компонент передает свойства значения дочернему компоненту

существуетparent.vueЗарегистрируйте message1 в теге дочернего компонента, вchildren.vueпрошедшийpropsПолучите сообщение1, если переданное значение является переменной, используйтеv-bind:или напрямую:, ссылка выглядит следующим образом:

parent.vue

<template>
	<div>
		<div>我是父组件</div>
		<children message1='我是直接参数' v-bind:message2='msg' :message3='obj'></children>
	</div>
</template>

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

<style>
</style>

children.vue

<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>

Открыть в браузере:


3.2 Дочерний компонент передает значение родительскому компоненту $emit

SUBSSMBLIES по VM. $ Emit (событие, [... ... args]), событие триггера на текущем экземпляре. Дополнительные параметры передаются обратному вызову слушателя. Родительский компонент слушает параметры получения событий тегов дочерней компоненты.

children.vue

<template>
	<div style="margin-top: 100px;">
		<div>我是子组件</div>
		<div>{{message1}}</div>
		<div>{{message2}}</div>
		<div>{{message3}}</div>
		<button @click='ChildToParent'>点我传爱</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>

parent.vue

<template>
	<div>
		<div>我是父组件</div>
		<div>大声告诉我你爱谁：{{loveWho}}</div>
		<children @emitToParent='parentSayLove' message1='我是直接参数' v-bind:message2='msg' :message3='obj'></children>
	</div>
</template>

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

<style>
</style>

При нажатии на кнопку браузер отображает:


3.3 Резюме

  • propsЭто может быть массив строк или объект (проверка типов, установка значений по умолчанию и т. д.);
  • использовать.nativeМодифицированные события слушателя, используемые в разработкеelement-ui При использовании тега кадра привязка события не действует. В это время вам нужно использовать.nativeретушьv-on:eventВстроенное событие можно прослушать корневой элемент метки кадра или компонента, например,<my-component v-on:click.native="doTheThing"></my-component>.

4. Передача значений между неродительско-дочерними (братскими) компонентами

Чтобы передавать значения между неродительскими и дочерними компонентами, вам необходимо определить публичный файл экземпляраbus.js, как промежуточный склад для передачи значений, иначе не будет достигнут эффект передачи значений между компонентами маршрутизации. Создайте новый в каталоге компонентовfirst.vueа такжеsecond.vueи общедоступные документыbus.js.

bus.js

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

существуетfirst.vueа такжеsecond.vueПредставьте bus.js соответственно.

	import Bus from '../bus.js'

Смоделированный сценарий:first.vueКsecond.vueзначение пропуска. существуетfirst.vueДобавление в событиеBus.$emit( event, […args] )Производительность, вsecond.vueпрошедшийBus.$on(event,callBack)контролировать.

first.vue

<template>
	<div>
		<div>我是first.vue</div>
		<button @click="firstToSecond">点击传值给second.vue</button>
	</div>
</template>

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

<style>
</style>

second.vue

<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>

Нажмите кнопку, в браузере отобразится:


резюме

Взаимодействие данных между одноуровневыми компонентами и между родительскими и дочерними компонентами, по сравнению с ними, связь между одноуровневыми компонентами на самом деле несколько похожа на передачу значений дочерним компонентом родительскому компоненту, и их принципы связи одинаковы, например , ребенок передает значения родителю.$emitа также$onформа, только неBus, но если подумать, родительский компонент на самом деле действует какBusРоль этого события автобус.

5. Используйте Vuex

Что такое Vuex, смотрите объяснение на официальном сайте:

Vuex — это приложение, разработанное специально для Vue.js.режим управления состоянием. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила, чтобы гарантировать предсказуемое изменение состояния.


Когда использовать Vuex?

Vuex помогает нам управлять общим состоянием и поставляется с большим количеством концепций и фреймворков. Это требует компромисса между краткосрочными и долгосрочными выгодами.

Использование Vuex может быть утомительным и избыточным, если вы не планируете разрабатывать большие одностраничные приложения. Это правда — если ваше приложение достаточно простое, вам лучше не использовать Vuex. Простойрежим хранениядостаточно для того, что вам нужно. Однако, если вам нужно создать одностраничное приложение среднего или большого размера, вы, вероятно, будете думать о том, как лучше управлять состоянием вне компонентов, и Vuex будет естественным выбором.

Создайте новый в каталоге компонентовvuexA.vueа такжеvuexB.vue, смоделируйте сцену:vuexA.vueКvuexB.vueзначение пропуска.

Сначала мы устанавливаем vuex,npm install vuex --save, создайте каталог vuex в каталоге src, а затем создайте новый в каталоге vuexindex.js,state.js,getters.js,actions.js,mutations.js:


vuex/index.js

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
})

Внесите vuex/index.js в main.js и внедрите его во Vue:

main.js

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')

state.js

export default{
	city:'nanjing'
}

vuexA.vue

<template>	
        <div>
		<div>我是vuexA中city参数：{{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>

vuexB.vue

<template>
	<div>
		<div>我是vuexB中的city参数：{{city}}</div>
	</div>
</template>

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

<style>
</style>

actions.js

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

mutations.js

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

getter.js

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

Открыть в браузере:


Измените значение на входе:


Очевидно, что когда входное значение на странице vuexA изменяется, значение на странице vuexB может быть изменено одновременно, то есть параметр города передается со страницы vuexA на страницу vuexB, так что значение может быть передано в компоненте с vuex.

Более подробные сведения о функциях vuex см.Официальная документация Vuex на китайском языке.


Весь код примера загружен намой GitHub, добро пожаловать в Форк.

6. Справочные документы

  1. Передача параметров родительско-дочернего компонента в VUE
  2. Различные способы коммуникации Vue и передачи ценности
  3. Vuex реализует передачу значений между родственными компонентами


Категории