Vue Chimenewood One Basket (Page, Components)

VUE page, there are many ways to pass the memory between components, and you will find a variety of ways, welcome to review supplements.

First, route

The routing passage is programmed

router.push (…)

as an example , Declaration . Here the simulation scenario jumps from Componentsa.Vue page to ComponentSb.Vue page. First, the routing configuration information is as follows: Router.js

Import Vue from ‘Vue’Import Router from ‘vue-router’import componentsA from’ ./components/componentsA ‘// Create componentsA.vueimport componentsB in components from’ ./components/componentsB ‘// Create componentsB.vueVue.use (Router) export components at DEFAULT New Router ({Routes: ‘/ Components), Name:’ Components, Component: Components}, Name: ‘ComponentsB’, Name: ‘ComponentSb’, Component: ComponentsB}]

 1.1 Routing Configuration Transceiver  
First determine the parameter name you want to pass, modify the routing configuration, pass Name, AGE, SEX three parameters:

{PATH: ‘ / Componentsb /: Name /: age /: sex ‘, name:’ ComponentSb ‘, Component: Components

In

Components.com via
THIS. $ Router.push Parameters:
  Components.comVue  

I am a component A

way a hop to the component B

export default {data () { Return {Person: {Name: 'Gene', age: '18', SEX: 'MALE'}}}, methods: {routertob1 () {tris. $ router.push ({path: `Componentsb / $ {this. Person.name} / $ {this.person.sex} / $ {this.Person.sex} `}}}}}

   
Then in
Componentsb.Vue
page with Receive parameters:
I am component B

export default {created () {this.Getrouterdata ()}, methods: {gtrouterdata () {const paramsconsole.log (param) // {name: 'gene', age: '18 ' , SEX: 'MALE'}}},}

Click the button "mode one hop to the component B", ComponentSb page print Out {name: 'gene', age: '18', sex: 'male'} , successfully acquired the parameters passing through the A page, and the address bar is displayed as localhost: 8889 / # / Componentsb / Gene / 18 / Male

(the port number is set according to its own settings), indicating that this pass-by-parameter URL will carry parameters.
1.2 Params Transfer
   Firstly, the routing configuration modifies part of the restore, in 
Componentsa.Vue
page Add button "mode two jumps Component B:
Components.com.coma.Vue
I Is a component A
way to switch to the component B

mode two jump to the component B

Add method

RouterTOB2

in Methods , using routing attributes

Name

to determine matching Route, use attribute params to pass parameters: Components (Components, Vue

  [ RouterTOB2 () {this. $ Router.push ({name: 'components), params: {esa:' I am transmitted to the parameter '}})}} (123)  
Componentsb.Vue this. $ Route.pamas {EXA:" I am transferred to the parameters of the component B "}
, the address bar is localhost: 8889 / # / componentsb
, indicating that this method URL does not carry parameters.
1.3 Query Transfer

This method is similar to the params transmission mode, in ComponentSa.Vue page continues to add buttons " Go to the component B ": Componentsa.Vue

I am a component A way a jumpTo the component B

, two hops to the component B
way three hops to the component B
   

Add method in Methods RouterTOB3 , using routing attributes Name or Path

to determine the matching route, use attribute

Query Componentsa.Vue

ROUTERTOB3 () {THIS . $ router.push ({name: ‘componentsb’, // path: ‘/ componentsb’Query: {Que:’ I transferred to the parameter B by Query to the parameter ‘}})}

In

Componentsb.Vue
page via this. $ Route.query
:   
Componentsb.Vue
GetRouterdata () {const Query = this. $ Route.queryconsole.log (query) // {QUE: "I passed Query To the parameters of component B "}} localhost: 8889 / # / companyTSB? QUE = I passed Query to groupParameters of Part B
, it is apparent that the URL will carry parameters.
1.4 Small knot

Writing format /: ID , the acquisition parameters are passed $ route , Params Maximenters and Query

The parametric difference is similar to

POST and Get method. params

mass participation address bar will not display parameters, and
query Participants will pass parameters in the address bar
   params 
mass participation refresh The page parameters will be lost, and the other two will not

PARAMS The route attributes corresponding to Name , and query

transmission The routing attribute can be

Name , or path

2 丶 use cache
   caching method From 
SessionStorage ,
localStorage

, cookie method, this method is not not related to VUE, so don’t talk.

The value between the three-parent subcomponents

Create a parent component in the Components directory
    Parent.Vue
  • and sub-components Children.Vue In the parent component, subassembly is introduced. To demonstrate convenience, / Parent path is added to the routing configuration. 3.1 Parent component to the subcomponent Piped PROPS
  • Registering Message1 on the sub-component tag of Parent.Vue , in Children.Vue PROPS Receive Message1, if the value passed is variable, use V-bind: or direct : , reference is as follows:
  • I am a parent component Import Children from './children'Export default {components: {recapon}, data () {return {msg:' I am the parameter '}}} of the parent component, Created () {this. Obj = {A: '1', B: '2', C: '3'}}}

I am a sub-assembly

{{message1} }

{{Message3}} Export Default {Props: ['Message1', 'Message2', ' Message3 '],

Open in the browser:

3.2 subcomponents to parent component values ​​$ EMIT , triggered the current instance through VM. $ EMIT (Event, [… ARGS]) The event. Additional parameters will pass to the listener callback. The parent component listened to the event to get parameters on the sub-component label. Children.Vue

I am a sub-assembly {MersSAGE1} [{Message2}}

{{message3}}
Point I love
   
Export Default {Props: ['Message1', 'Message2', 'Message3'], DATA () {Return {Loud: 'i love xx'}}, methods: {childtoparent () {this. $ EMIT ('EmitToparent', this.Loud)}}}, created () {console.log (this.Message3)}}
Parent.Vue

I am a parent component {声 爱 你: {{loveWho}}

  Import Children from './children'Export default {components: {recapon}, data () {return {msg:' I am the parameter of the parent component ', loveWho:' '}}, methods: {ParentsayLove (DATA) {this.loveWho = DATA}}}}}}}}}}, created () {this.obj = {A: '1', B: '2', C: '3'}}}  
Click button browser display:
3.3 Small knot
PrOPS can be a string array, or an object (can be verified, setting the default value, etc.);
Use
.native modifier monitoring, development When
Element-UI

is used, the event binding is invalid. At this time,

.native

can be used Vue传参一箩筐(页面、组件) V-ON: Event

, one native event can be listened on the root element of the frame label or component, for example

.

Four, non-father and son (brother) component passing value

The value between the parent subcomponents, you need to define a public instance file Bus.js , as an intermediate warehouse to pass the value, otherwise the effect of the routing component does not meet the values. New

first.Vue
and , and public files
 Bus.js  in the Components directory.  Bus.js 
Import Vue from 'Vue'Export Default New Vue ()
In and
second.vue , Bus.js is introduced. Import bus from '../bus.js'
simulation scenario:

first.vue Purchase to Second.Vue . In first.vue

by adding
Bus. $ EMIT (Event, [… Args]) , pass
 second.vue   Bus. $ On (Event, Callback) 
for listening.
First.Vue
I am first.VUE Click on the pass value to Second.Vue
Import bus from ‘../bus.js’Export default {Data () {return {msg: ‘I am first.vue to the parameter’}}}:}:}:}:}: {firsttosecond (’emittosecond’, this.msg)}}}

Vue传参一箩筐(页面、组件)

SECOND.VUE

I am Second.Vue {{info}} Import bus from ‘../bus.js’Export default {data () {RETURN {info: ” ‘}}, mounted () {const there = this; bus. $ {on (‘ emittosecond “, function (data) {That.info = DATA}}

Click the button, the browser is displayed:

Small junction

The data interaction between the brothers and the parent components, the two compared, the communication between the brothers component is actually similar to the sub-assembly to the parent component, and their communication principle is the same, such as the child to the father. The pass value is also $ EMIT and $ ON , but there is no bus , but if we think carefully, the parent component is actually acting Bus

The role of an event bus.

5 丶 Use Vuex What is Vuex, look at the official website explanation:

Vuex is a specially developed for Vue.js applications Status Management Mode
. It uses a status of all components of the centralized storage management application, and changes in a predictable manner in a predictable manner in a corresponding rule.   
Under what circumstances use Vuex?

Vuex can help us manage shared status and come with more concepts and frameworks . This requires trade-offs for short-term and long-term benefits. If you don't plan to develop large single-page applications, use VUEX may be cumbersome. This is true - if your application is simple enough, you should not use Vuex. A simple STORE mode is enough for you. However, if you need to build a large single-page application, you are likely to consider how to better manage status outside of the component, and Vuex will become a natural choice.

Vuexa.Vue
and Vuexb.Vue
, Simulation Scene:  Vuexa.Vue  Vuexb.Vue 
Passage.
First we install Vuex,

npm install vuex –save , create a Vuex directory in the src directory, then build in the Vuex directory index.js , state.js , getters.js , actions.js , mutations.js :

Vuex / INDEX.JS

 Import Vue 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})   
In Main.js, Vuex / Index.js is introduced and injected into Vue:
main.js
Import Vue from 'Vue'Import App from' ./app.Vue'Import Router from './Router'Import Store from' ./vuex'Vue.config.ProductionTIP = falsenew Vue ({Store, Router, Render: h => h (app),}). $ mount ('# app')

Export default {city: ‘nanjing’}
   
I am a City parameter in Vuexa: {{city}}

Export Default {Methods: {Change (e) {this. $ Store.dispatch (‘setcityname’, e.target.value)}}, compute: {city () {Return THIS. $ store.getters.getcity}}}

Vue传参一箩筐(页面、组件)

Vuexb.Vue

I am a City parameter in VuexB: {{city}}

Export DEFAULT {}}, computed: {city () {Return this. $ store.state.city}}}

Vue传参一箩筐(页面、组件)

Export Default {setcityName ({commit, state}, name) {commit (Commital) ‘setCity’, Name)}}

Export Default {setCity (state, name) {state.city = name // Set new value}} Getter.js

EXPORT DEFAULT {getCity (state) {return state.city// Returns the current city name}} Open in the browser: Obviously, when the INPUT value is changed in the Vuexa page, it can be changed at the same time. The value in the VUEXB page, the city parameter is transmitted from the Vuexa page to the Vuexb page, so that Vuex is transmitted in the component.

Vuex For more detail, please refer to the Vuex Chinese official documentation.

Vue传参一箩筐(页面、组件) All instance code has been uploaded to

My GitHub , welcome to visit Fork.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment