Shulou(Shulou.com)06/02 Report--

This article mainly introduces the ways of passing values of vue components. It is very detailed and has a certain reference value. Friends who are interested must read it!

Component value transfer way: 1, through the route to pass the value; 2, by letting the child component tag in the parent component to bind the data of the parent component, the props of the child component receives the value passed by the parent component, and the props of the child component receives the value transmitted by the parent component; 3, the child component passes the value to the parent component and traverses the getData event with "this.$emit".

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1. Routing parameters

Steps:

① defines a route with the parameter props: true, and leaves a parameter placeholder when defining the route path: name "usage: to=" 'path /' + value ""

② adds the parameter props: ['name'] to the page you jump to

③ gets the name in the page to which it jumps. Usage: direct this in js. Directly interpolate {{name}} in name;html "

2. The parent component passes values to the child component

The parent component passes the value to the child component by letting the child component tag bind the data of the parent component, and the props of the child component can receive the value passed by the parent component.

Steps:

Set the data "data () {parentid: value}" to be passed in the parent component of ①

② binds a custom attribute on a child component referenced in the parent component and binds the data to the custom attribute. "

"

③ can add the parameter props: ['childid'] to the subcomponent.

Code:

New Vue ({el: "app", data: {parentid: "88888"}, components: {"mybtn": {props: ['childid','title'] Template:'I am the button {{childid}}'})

The results show:

3. Child components pass values to parent components

The implementation of the child passing on the parent is to use this.emit to traverse the getData event, first to trigger the setData event with a button, to traverse the getData event with this.emit in setData, and finally to return this.msg

Steps:

① because the parent component requires parameters, define a custom event on the tag in the parent component and get the parameters inside the event; "@ myEvent=" callback "receives parameters in the callback function"

② triggers custom events in child components and passes parameters. "this.$emit ('Custom event in parent component', parameter)"

Code:

Export default {name: 'test', data () {return {childid: "666", acolor:'blue', bcolor:'red'}}, methods: {getColor (colors) {/ / parent component can get the colors console.log (colors) this.acolor = "white" passed by the child component; this.bcolor = colors }, / / receive multiple parameters / * getColor (colors1,colors2) {console.log (colors1,colors2) this.acolor = colors2; this.bcolor = colors1;} * /}, components: {'mybtn': {props: [' parentid','title'], template: `

I started out as a blank piece of paper.

I am the {{parentid}} button {{title}} `, methods: {changeColor () {/ / this method triggers the event in the parent component, and the first parameter is the name of the triggered event. The second parameter and the parameter this.$emit ('changeColorEvent', "orange") / / sent to changeColorEvent can be directly followed by / / this.$emit (' changeColorEvent', "orange", "white")}.

4. Passing values between non-parent components

Steps:

(1) method 1

① establishes a common communication component (Vue), which is introduced into the component that needs to pass values.

② binds an event this.on ('eventname', this. Id)

③ triggers the event this.$ emit ('eventname', (options) = > {}) in another component

(2) method 2.

Add public data to local storage, which can be obtained in two pages, change

The above is all the contents of the article "what are the ways in which vue components pass values?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.