Parent-child component communication

  • Most of the communication provided by vUE itself is parent-child component communication

prop

  • One of the most common forms of component communication is passing from parent to child

event

  • One of the most common ways for components to communicate is to notify the parent component through an event when something happens to a child component

Style and class

  • A parent component can pass style and class to its children, which are merged into the root element of the child component

The sample

The parent component

<template>
  <div id="app">
    <HelloWorld
      style="color:red"
      class="hello"
      msg="Welcome to Your Vue.js App"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>
Copy the code

Child components

<template>
  <div class="world" style="text-align:center">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,}};</script>

Copy the code

Render result:

<div id="app">
  <div class="hello world" style="color:red; text-aling:center">
    <h1>Welcome to Your Vue.js App</h1>
  </div>
</div>

Copy the code

attribute

If a parent component passes attributes to a child component that the child component does not declare, they are called attributes, and these attributes are attached directly to the root element of the child component

  • Style and class are not included, they are treated specially

The sample

The parent component

<template>
  <div id="app">
    <! -- attribute (MSG) -->
    <HelloWorld
      data-a="1"
      data-b="2"
      msg="Welcome to Your Vue.js App"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>

Copy the code

Child components

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,},created() {
    console.log(this.$attrs); {"data-a": "1", "data-b": "2"}}};</script>

Copy the code

Render result:

<div id="app">
  <div data-a="1" data-b="2">
    <h1>Welcome to Your Vue.js App</h1>
  </div>
</div>

Copy the code
  • Subcomponents can be configured with inheritAttrs: false, which disallows attributes to be attached to the root element of the subcomponent, but does not affect fetching through $attrs

Natvie modifier

  • When registering an event, the parent component can use the native modifier to register the event on the root element of the child component

The sample

The parent component

<template>
  <div id="app">
    <HelloWorld @click.native="handleClick" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
  methods: {
    handleClick() {
      console.log(1); ,}}};</script>

Copy the code

Child components

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

Copy the code

The renderings

<div id="app"> <! -- Click on the div to output1 -->
  <div>
    <h1>Hello World</h1>
  </div>
</div>

Copy the code

$listeners

  • Child components can retrieve all event handlers passed by the parent via $Listeners

Sync modifier

Similar to v-Model, it is used for bidirectional binding, except that v-Model can only bidirectional bind for one data, while sync modifier is unlimited

The sample

Child components

<template>
  <div>
    <p>
      <button @click="$emit(`update:num1`, num1 - 1)">-</button>
      {{ num1 }}
      <button @click="$emit(`update:num1`, num1 + 1)">+</button>
    </p>
    <p>
      <button @click="$emit(`update:num2`, num2 - 1)">-</button>
      {{ num2 }}
      <button @click="$emit(`update:num2`, num2 + 1)">+</button>
    </p>
  </div>
</template>

<script>
export default {
  props: ["num1"."num2"]};</script>

Copy the code

The parent component

<template>
  <div id="app">
    <Numbers :num1.sync="n1" :num2.sync="n2" />
    <! -- equivalent to -->
    <Numbers
      :num1="n1"
      @update:num1="n1 = $event"
      :num2="n2"
      @update:num2="n2 = $event"
    />
  </div>
</template>

<script>
import Numbers from "./components/Numbers.vue";

export default {
  components: {
    Numbers,
  },
  data() {
    return {
      n1: 0.n2: 0}; }};</script>

Copy the code


p a r e n t and The parent and children

  • Inside the component, you can get the parent and child instances of the current component using the parent and parent and the parent and children properties, respectively


s l o t s and Slots and scopedSlots

ref

The parent component can get instances of the children through ref

Cross component communication

Dojo.provide and Inject

The sample

// Parent component provides 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// Inject component 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

Copy the code

See: cn.vuejs.org/v2/api/?#pr…

router

If a component changes the address bar, all components listening for the address bar react accordingly

The most common scenario is to change the address by clicking on the router-link component, and the router-View component renders other content

vuex

Data warehouse for large projects

Store model

Data warehouse for small to medium sized projects

// store.js
const store = {
  loginUser:... .setting:... }// compA
const compA = {
  data(){
    return {
      loginUser: store.loginUser
    }
  }
}

// compB
const compB = {
  data(){
    return {
      setting: store.setting,
      loginUser: store.loginUser
    }
  }
}

Copy the code

eventbus

  • A component notifies the event bus that something happened, and the event bus notifies all other components listening for the event to run a function