Vue2.0 Value passing mode:

stayVue In the process of project development, Components are often used to manage different functions, Some common components will be extracted. At this time, there must be some questions and demands? For example, one component calls another component as its own sub component, So how can we transfer values to sub components? If it is the development of e-commerce website system, There will also be shopping cart options, In this case, the value transfer of non parent-child components will be involved. Of course you can use itVuex State management tools to achieve, This part will be introduced separately later. Let me introduce youVue Three commonly used value transfer methods in development.

Vue There are three commonly used ways to transmit values:

Father's son

Son father


Quote a sentence from the official website: The parent-child relationship can be summarized as prop Downward transmission, Event passed up. Parent component passed prop
Distribute data to sub components, Child component sends message to parent component through event, As shown in the figure below:

Next, We may understand it better through examples:

1. Parent component transfers value to child component

Parent component:
<template> <div> Parent component: <input type="text" v-model="name"> <br> <br> <!-- Introduce subcomponents
--> <child :inputName="name"></child> </div> </template> <script> import child
from'./child' export default { components: { child }, data () { return { name:
'' } } } </script>
Sub components:
<template> <div> Sub components: <span>{{inputName}}</span> </div> </template> <script>
exportdefault { // Accept the value of the parent component props: { inputName: String, required: true } } </
2. Pass value from child component to parent component

Sub components:
<template> <div> Sub components: <span>{{childValue}}</span> <!-- How to define the value passing method of a subcomponent --> <input
type="button" value=" Click trigger" @click="childClick"> </div> </template> <script>
exportdefault { data () { return { childValue: ' I am the data of the subcomponent' } }, methods: {
childClick () {// childByValue Is in the parent componenton Methods of monitoring // Second parameterthis.childValue Is the value to be passed this
.$emit('childByValue', this.childValue) } } } </script>
Parent component:
<template> <div> Parent component: <span>{{name}}</span> <br> <br> <!-- Introduce subcomponents
Define aon Method of monitoring the status of subcomponents--> <child v-on:childByValue="childByValue"></child> </div> </
template> <script> import child from './child' export default { components: {
child }, data () {return { name: '' } }, methods: { childByValue: function
(childValue) { // childValue Is the value passed from the subcomponent = childValue } } } </script>
3. Value transfer of non parent child components

Pass values between non parent and child components, Public instance files need to be definedbus.js, Transfer value as intermediate warehouse, Otherwise, the effect of value transfer cannot be achieved between routing components.

//bus.js import Vue from 'vue' export default new Vue()
<template> <div> A assembly: <span>{{elementValue}}</span> <input type="button" value=
" Click trigger" @click="elementByValue"> </div> </template> <script> //
Introduce publicbug, As a tool of communication import Bus from './bus.js' export default { data () { return
{ elementValue:4 } }, methods: { elementByValue: function () { Bus.$emit('val',
this.elementValue) } } } </script>
<template> <div> B assembly: <input type="button" value=" Click trigger" @click="getData"> <span
>{{name}}</span> </div> </template> <script> import Bus from './bus.js' export
default { data () { return { name: 0 } }, mounted: function () { var vm = this
// use$on Event to receive parameters Bus.$on('val', (data) => { console.log(data) = data })
}, methods: { getData:function () { } } } </script>
☺ Vue Three common ways of value transfer are introduced, If there's anything I don't understand, You can leave a message in the comment area!