Vue2.0 Transmission mode :


stay Vue 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 it Vuex State management tools to achieve , This part will be introduced separately later . Let me introduce you Vue Three commonly used value transfer methods in development .

Vue There are three commonly used ways to transmit values :

*
Father to son

*
Son to father

*
Parenting

Quote a sentence from the official website : The parent-child relationship can be summarized as prop Pass down , 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>
Subcomponent :
<template> <div> Subcomponent : <span>{{inputName}}</span> </div> </template> <script>
exportdefault { // Accept the value of the parent component props: { inputName: String, required: true } } </
script>
2. Pass value from child component to parent component



Subcomponent :
<template> <div> Subcomponent : <span>{{childValue}}</span> <!-- How to define the value passing method of a subcomponent --> <input
type="button" value=" Click to trigger " @click="childClick"> </div> </template> <script>
exportdefault { data () { return { childValue: ' I am the data of the subcomponent ' } }, methods: {
childClick () {// childByValue Is in the parent component on Methods of monitoring // Second parameter this.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 a on 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 this.name = childValue } } } </script>
3. Value transfer of non parent child components

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

public bus.js
//bus.js import Vue from 'vue' export default new Vue()
assembly A:
<template> <div> A assembly : <span>{{elementValue}}</span> <input type="button" value=
" Click to trigger " @click="elementByValue"> </div> </template> <script> //
Introduce public bug, 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>
assembly B:
<template> <div> B assembly : <input type="button" value=" Click to 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) vm.name = data })
}, methods: { getData:function () { this.name++ } } } </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 !