$parent/$children /$broadcast/$dispatch

$parent/$children: Encapsulates nested components using the parent or child component method. This method does not change data and is usually used in combination with $broadcast/$dispatch.

What is the $parent / $children

Div tag, who are the parent and child elements?

There is no answer.

Who the parent and child elements are depends on the location of the div at runtime.

Try talking about the parent and child elements of the following divs.

<body>
  <div id="div1">
    <main>
      <div id="div2">
        <h1>Primary title<h1>
        <p>The paragraph<p>
      </div>
    <main>
  </div>
</body>
Copy the code

div1:

  • The parent element is,body
  • The child element is,main. Note that children are direct descendants.

div2:

  • The parent element is,main
  • The child element is,H1 and p. Note that children are direct descendants.

Summary:

  • The element itself does not have a parent or child element, but rather, at runtime, the location of each element instance determines the parent and child elements
  • Each element instance has one and only one parent element.
  • But each element instance may have no child elements, it may have one, it may have more than one, so generallychildrenIs an array, empty array if not
  • When an element instance is added or removed at runtime, its parent and child elements change as well.

Text is coming!! Components are the same!!

Because components are supposed to imitate elements!!

Replace the above element with a component!

  • Components do not have parents and children themselves, but rather, at runtime, the location of each component instance determines the parent and child
  • Each component instance has one and only one parent.
  • But each component instance may have no child components, may have one, may have multiple, so generallychildrenIs an array, empty array if not
  • When component instances are added or removed while js is running, the component instances that change position, parent and child components also change.

Properties and events can also be understood by analogy with elements, but that will come later.

$parent/$children

Write a page component, put some components in it, and print $parent/$children

<template lang="pug"> //- page component div list-item list-item </template> <script> import ListItem from "@/components/ListItem"; Export default {name: "List", components: {ListItem}, Mounted () {console.log("页 $parent", this.$parent); Console. log(" page $children", this.$children); }}; </script>Copy the code

}}}}}}}}}}}}}}}}}}}}}}}}} You must use nextTick if you want to get the parent component’s elements and so on in a child component.

$dispatch

When using element-UI, there is an el-form that looks something like this:

<template lang="pug">
el-form
  el-form-item
    el-input
</template>
Copy the code

Suppose the el-input wanted to execute a method on the el-form, this.$parent.$parent. MethodXx (). More levels would be more complex, and $Dispatch would be born.

// main.js
// Sends events to a component
Vue.prototype.$dispatch = function(eventName, componentName, ... args) {
  let parent = this.$parent;
  while (parent) {
    // Events are triggered only by specific components. It doesn't go all the way up, all the way up
    const isSpecialComponent = parent.$options.name === componentName;
    if (isSpecialComponent) {
      // If triggered, the loop is terminatedparent.$emit(eventName, ... args);return; } parent = parent.$parent; }};Copy the code

$dispatch(‘changeSort’,’el-form’,{isAsc:true})

$broadcast

This.$children[0].$children[0].methodxx (). More levels may be more complex, so $broadcast is born. $broadcast(‘changeValue’,’el-input’,’hello’).

Note that $children is an array, so get it with [0] when there is only one child. When there are multiple child components, it does not guarantee order and is not responsive.

// Notifies a component down, triggering an event
Vue.prototype.$broadcast = function(eventName, componentName, ... args) {
  // Children are the children of all components
  let children = this.$children;
  broadcast(children);
  // Note here that the extraction of the new method is recursive, not recursive $broadcast
  function broadcast(children) {
    for (let i = 0; i < children.length; i++) {
      let child = children[i];
      const isSpecialComponent = child.$options.name === componentName;
      if (isSpecialComponent) {
        // If triggered, the loop is terminatedchild.$emit(eventName, ... args);return;
      }
      // If not, see if there are any child components, then recursechild.$children.length && child.$broadcast(eventName, componentName, ... args); }}};Copy the code

update

Thanks for the comments section, above can be used as a train of thought to expand, but the official document is not recommended broadcast/broadcast/broadcast/dispatch, but tend to use eventBus patterns.