What is the way to pass value to vue component?

Component value transfer method: 1. Pass the value through routing; 2. By binding the sub-component label in the parent component to the data of the parent component, the props of the sub-component receive the value passed by the parent component. The props of the component receive the value passed by the parent component; 3. When the child component passes the value to the parent component, use "this.$emit" to traverse the getData event; 4. When passing value between non-parent components, a binding "this.on" event, one triggers the "this.$emit" event, or adds public data in local storage, which can be obtained in both pages

##vue The way to pass values ​​​​from components:

1. Pass parameters for routing

Steps:

①Add the parameter props: true when defining the route, and when defining the routing path There should be a parameter placeholder: name『Usage: to="'path/'+value"』

②Add parameter props:['name']

## to the page you jump to #③The name is obtained on the page that jumps to "Usage: directly this. name in js; direct interpolation {{ name}} in html"

2. The parent component passes the value 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 in the parent component. The props of the child component receive the value passed by the parent component.

Steps ：

①Set the data to be transferred in the parent component 『data(){ parentid: value}』

②Bind a custom attribute to the child component referenced in the parent component and put The data is bound to the custom attribute " mybtn>"

③Add parameter props:['childid'] to the sub-component, that's it

Code:

<div id="app"><br/>    <mybtn :childid=&#39;parentid&#39; title="我是标题"></mybtn><br/></div><br/><script><br/>    new Vue({<br/>        el:"app",<br/>        data:{<br/>            parentid:"88888"<br/>        },<br/>        components:{<br/>            "mybtn" : {<br/>                props: [&#39;childid&#39;,&#39;title&#39;],<br/>                template: &#39;<button>我是{{childid}}号按钮{{title}}</button>&#39;<br/>            }<br/>        }<br/>    })<br/></script><br/>

Result display:

3. The child component passes the value to the parent component

The child passes the parent's value The implementation method is to use this.e m i t to traverse the getData event. First use the button to trigger the setData event, use this.emit in setData to traverse the getData event, and finally return this.msg

Steps:

①Since the parent component requires parameters, define a custom event on the label in the parent component and obtain the parameters inside the event; "@myEvent=" callback" receives parameters in the callback function"

②Trigger custom events in subcomponents and pass parameters. 『this.$emit('Custom event in parent component', parameters)』

Code:

<template><br/>  <div><br/>      <mybtn :style="{color:acolor,background:bcolor}" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn><br/>  </div><br/> <br/></template><br/><script><br/> <br/>  export default {<br/>    name : &#39;test&#39;,<br/>    data () {<br/>      return {<br/>        childid:"666",<br/>        acolor:&#39;blue&#39;,<br/>        bcolor:&#39;red&#39;<br/>      }<br/>    },<br/>    methods:{<br/>      getColor(colors){<br/>        //父组件就可以拿到子组件传过来的colors<br/>        console.log(colors)<br/>        this.acolor = "white";<br/>        this.bcolor = colors;<br/>      },<br/>      //接收多个参数<br/>      /*getColor(colors1,colors2){<br/>        console.log(colors1,colors2)<br/>        this.acolor = colors2;<br/>        this.bcolor = colors1;<br/>      }*/<br/>    },<br/>    components: {<br/>      &#39;mybtn&#39; : {<br/>        props : [&#39;parentid&#39;,&#39;title&#39;],<br/>        template : `<br/>          <div class="box"><br/>            <p>我最初是一张白纸</p><br/>            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button><br/>          </div><br/>        `,<br/>        methods: {<br/>          changeColor(){<br/>          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数<br/>           this.$emit(&#39;changeColorEvent&#39;,"orange")<br/>           //发送多个参数可以直接跟在后面<br/>           //this.$emit(&#39;changeColorEvent&#39;,"orange","white")<br/>          }<br/>        }<br/>      }<br/>    }<br/>  }<br/></script><br/><style scoped><br/> <br/></style><br/>

4. Between non-parent components Passing value

Steps:

(1)Method 1,

①Create a public communication component (Vue), and introduce the communication component into the component that needs to pass value

②Bind an event in one this.on('eventname', this. id)

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

(2) Method 2,

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

The above is the detailed content of What is the way to pass value to vue component?. For more information, please follow other related articles on the PHP Chinese website!