Vuejs file parameter passing method

Vue2 version
vscode
roughly summarizes several situations:

1. Parent to child, the parent component uses props to pass data to the child component

1. Bind a property on the child component tag of the parent component, and mount the variable to be transmitted.
2. Accept data through props in the child component. Props can be an array or an object. The accepted data can be directly used as props: [property name] or props{property name: data type}

Code example:

2. From child to parent, the child component uses $emit() to transmit data to the parent component

1. Define an event on the child component tag of the parent component, and then call the required method
2. Use this.$emit('event') in the method of the child component to trigger the event defined in the parent component. Data is passed as parameters

Code example:

3. Brothers, including between .vue and .vue files, and between .vue and .js files can pass data through public files

1. Create a new file as bus.js in src, and then export an empty vue instance
2. Introduce bus.js on the data transmission side and $emit{(}^{\text{'}}event{name}^{\prime }{，}^{\text{'}}parameter{}^{\prime })to\; dispatch\; events,\; the\; data\; istransmitted\; in\; the\; parameter\; form\; of\; em\; t\; ()3.Onthesidereceiving\; the\; data,\; introducebus.jsthen\; usedbus.on$('event name', (data) => {data is the accepted data})

Code example:

4. Use 'ref/refs' to transfer data between parent and child components

1. If ref is used on a normal DOM element, the reference points to the DOM element. If it is used on a subcomponent, the reference points to the component instance.
2. You can directly call the method or data of the component through the instance, which is also a way for the child component to pass the value to the parent component

Code example:

5. Use Vuex to pass data

Components dispatch to actions, actions are asynchronous operations, then commit to mutations in actions, and mutations change state through logical operations, so as to synchronize to components and update data status

Code example:

6. $parent

The parent component instance can be obtained through parent, and then the properties and methods of the parent component can be accessed through this instance. Similar to the inheritance of the ref child component to the parent component, in fact, the parent component gets the instance of the child component, and then you can get the corresponding methods and properties. It has a brother root, and you can get the instance of the root component, similar. .

Code example:

7. storage pass value

If the usage scenario allows, you can use the browser's sessionStorage, localStorage., to pass parameters, the principle is similar to the bus bus, and vuex, both use the same storage space,

Code example:

Note : It stores key-value pairs, which can only be string types. If you want to store objects, you need to use let objStr = JSON.stringify(obj) to convert them into strings and then store them (when using let obj = JSON. parse(objStr)
parses as an object).

Recommend a library good-storage, which encapsulates sessionStorage, you can directly use its API to store objects

8. Routing pass value

Use question marks to transfer value
from page A to jump to page B. this.router.push('/B?name=danseek')You can use page B to use this.router.push('/B?name=danseek')page B. You can use this.route.query.name to get the value passed from page A.
Above, pay attention to the difference between router and route

Use a colon to pass the value.

On the B page, you can this.$route.params.nameget the value of the name passed in by the route.

Use parent-child components to pass values
​​Since router-view itself is also a component, we can also use parent-child components to pass values, and then add props to the corresponding sub-pages. Because the route is not refreshed after the type is updated, it cannot be directly in the sub-page. The value of the latest type is obtained directly in the mounted hook of the page, but watch is used

9. Global variables

Define a global variable, assign it directly to the component with value, and use it directly in the required component. . . (to be added later)