In Vue framework development projects, components are often used to manage different functions, and some common components are extracted. There must be some doubts and needs at this time. For example, if one component calls another component as its own subcomponent, how do we pass values to the subcomponentWhat? If it is the development of e-commerce website system, will also involve shopping cart options, this time will involve non-parent component value transfer. Of course, you can also use the Vuex state management tool to implement this part, which we will introduce later. Let me first introduce three kinds of values commonly used in Vue development.Way.
VueThree commonly used ways of passing are:
-
Father’s son
-
Son’s father
-
Non father and son value
Referring to the official website, the relationship between parent and child components can be summarized as prop down, event up. The parent component sends data to the child component through prop, and the child component sends messages to the parent component through events, as shown in the following figure:
Next, we can see more clearly by example.
1. Parent components are passed to sub components.
Parent component:
<template>
<div>
Parent component:< input type= "text" v-model= "name" >< br>< br><!! -- introducing sub components.>< child: inputName= "name" > < /child>< /div>< /template>< script&gT;Import child from'./child'Export default {Components: {Child},Data (){Return {Name: ''}}}< /script>
Subcomponents:
<template>
<div>
Subcomponents:< span> {{inputName}}< /span>< /div>< /template>< script>ExPort default {/ / accept the value of parent componentProps: {InputName: String,Required: true}}≪ /script>
2. Child components are passed to parent components.
Subcomponents:
<template>
<div>
Subcomponents:< span> {{childValue}}< /span><! -- define a subcomponent value passing method -->< input type="Button" value= "click trigger" @click= "childClick" >< /div>< /template>< script>ExpoRT default {Data () {Return {ChildValue: 'I am data for child components'.}},Methods:{ChildClick () {/ / childByValue is the way to listen to the parent component on./ / the 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><!! -- a way to introduce a sub component to define a on.Monitor the state --> of sub components;< 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 by sub components.This.name = childValue}}}< /script>
3. Non parent components are passed on.
To transfer values between non-parent and child components, a common instance file, bus.js, needs to be defined as an intermediate repository to transfer values, otherwise the routing components can not achieve the effect of value transfer.
Public bus.js
//bus.js import Vue from 'vue' export default new Vue()
Component A:
<template>
<div>
AComponents:< span> {{elementValue}}< /span>< input type= "button" value= "click trigger" @click= "e"LementByValue ">< /div>< /template>< script>/ / the introduction of public bug as a tool for intermediate communication.ImportBus from'./bus.js'Export default {Data () {Return {ElementValue: 4}},Methods: {ElementByValue: function () {Bus.$emit ('val', this.elementValu)E)}}}< /script>
Component B:
<template>
<div>
BComponents:< 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 parametersBus.$on ('val', (data) => {Console.log (data)VM.name = Data})},Methods: {GetData: function () {This.name++}}}< /script>