preface

When we develop vUE projects, we often encounter the need to click a button – pop up a popover – enter form data in the popover – submit and close the popover

If the home page is index.vue, the popover component can be directly written in the index.vue. However, in order to make the index.vue more concise and ensure that the variables in the dialog box and the variables in the home page do not interfere with each other, we will write the popover component in another vue file, such as: In modal. Vue, this has the added benefit that other pages can also introduce the dialog component as a child component

The parent component passes parameters to the child component

The parent component writes to the child through import + Component, then v-bind binds the data, and the child receives it through props

Train of thought

  • Parent: custom attribute name + data (to be passed) => v-bind:value=” data”
  • Child: props [” custom property name on parent “] => Perform data reception

Child component: child.vue

Key points:

  • inpropsThe array contains the names of custom properties on the parent component
  • intemplateIn which data is received

Parent component: father.vue

Key points:

  • Introduce the child.vue file and create a variable for it
  • incomponentsI’m going to write this variable inside
  • intemplateSubcomponents need to be registered

Save the modified file and view the browser

More importantly, we can v-bind the value of message dynamically

At this point in the browser

conclusion

  • Through the parent componentimport – components – < />Trilogy register sub-components
  • Child components in thepropsObject to create a propertyprop
  • The parent component is added to the registered child component labelpropAttributes, i.e.,prop="value"
  • The parent component can passv-bind:prop(:prop) to achieve bidirectional data binding

Graphic memory method:

The child component passes parameters to the parent component

The child component click sets the click event, and the $emit sets the parameters after the channel, and the parent component receives it in methods

Train of thought

  • $emit(‘ custom event name ‘, data) = ‘callback function’
  • Parent: methods: {callback () {// logic}}

Child component: child.vue

  1. Create a button in a child component and bind an event to the button

  1. Used in the function that responds to the click event$emitTo fire a custom event, passing a parameter

Parent component: father.vue

  1. Listen for the custom event in the child tag in the parent component and add a handling method that responds to the event

  1. To save the changed file, click the button in your browser

conclusion

  • A custom event (such as a click event) needs to be triggered in a certain way in the child component
  • Child component usethis.$emitMethod with the first parameter being the name of the method defined by the parent componenteventThe second argument is the passed value
  • Register the child component in the parent component and bind the child component label to listen for custom events (event="Event"),Event(data)Can accept the parameters that are passed

Graphic memory method:

  • In communication, whether a child passes a value to a parent or a parent passes a value to a child, they all have one thing in commonIntermediate mediumThe medium from the child to the father isCustom eventThe parent to child medium isAttributes in props. Grasp these two points for father-son communication is easy to understand

Pass parameters between sibling components

$on = $on = $on = $on = $on = $on = $on = $on = $on = $on = $on

Train of thought

  • Let bus = new Vue ()
  • A: methods :{function {bus.$emit(‘ custom event name ‘, data)
  • B: created () {bus.$on(‘ custom event name sent by A ‘, function)}

Transfer station file

Create bus.js as the transfer station file

Content for the bus. Js

child1.vue

child2.vue

conclusion

  • Brother component throughclickSet the click event
  • Brother component through$emitSet the channel transmission parameters to the relay station
  • Younger component through$onReceive parameters from the transfer station

Communication between any component

Any relationship between components can be passed through the Vue-router to complete, refer to the article: vUE series — Vue-router pass parameters

Refer to the article

  • Vue components pass values to each other: parent to child, child to parent
  • Vue Use of parent to child, child to parent, and sibling components for communication