There are two ways to implement component communication in VUE. I will introduce the first one here

The father the son

Static data rendering

Here we prepare two.vue files A and b

/ / a template
<template>  
  <b  name='Joe'/>
</template>

<script>
import b from './b.vue'
export default {
 name: a,
  components: {
    b
  }
</script>
Copy the code

First, we introduce component B in page A, and use component B normally and give a name property value of Zhang SAN (outlaw fanatics), then we open component B

<template>
  <p> {{name}}</p>
</template>

<script>
export default {
  name: 'b'.props: {
    name: {}}}</script>
Copy the code

At this time If we open a browser running this code Will find that there will be a browser zhang SAN string Of course this is not enough, in the work, I believe that the boss wants you to render data certainly won’t let you render it a little bit of data, and static data, made no sense to do so. So we advance! Dynamic rendering of data

Render dynamic data using V-ON

In the HTML template, you can use v-bing to listen for this value, or you can use it directly.

  data(){
    name: ['Joe'.'bill'.'Cathy'.'Daisy']},Copy the code
   <template>
       <b v-bing:name='name'/> <! <b :name='name'/>
   </template>
Copy the code

Then v-for is used in component B to render this group of data

    <template>
       <div> <span v-for="item in name" :key="item">{{item}}</span></div>
       <! -- At this point, the top of the page can be displayed ** Zhang SAN li Four Wang Five Zhao six ** -->
    </template>
Copy the code

Said father to son then there must be son to father

String mode

Again, component B added a click event

   <template>
       <b v-bing:name='name'/ @click="itemClick">
   </template>
Copy the code
  methods: {
    itemClick(){
       $emit receives two parameters: the first is the name of the event and the second is the content to be passed
      this.$emit('itemClick')}Copy the code

How do YOU accept that when you add the event don’t worry that’s all you need

   <template> 
       <b @itemClick="click" />
   </template>
Copy the code
  methods: {
    click(){
      console.log('Child component clicked');
    }
Copy the code

How is it easy huh huh