Vue component templates and components refer to each other's code examples

1. The vue component is composed of these three parts

<template>
 <div>
 </div>
</template>
<script>
 export default{}
</script>
<style>
</style>

2. References between components

In 3 steps, assuming there are now two components, and now you need to introduce the components into the components.

&lt;template&gt;
  // Step 3  &lt;Add/&gt;
&lt;/template&gt;
&lt;script&gt;
   // Step 1  import Add from './components/'
  // Step 2  components: {
   Add
  }
 }
&lt;/script&gt;
&lt;style&gt;

&lt;/style&gt;

3. Transfer of data between components

Fake will pass the data from the component to the component

&lt;template&gt;
  // Step 3  // Pass data, pay attention to colon  &lt;Add :comments="comments"/&gt;
&lt;/template&gt;


&lt;script&gt;
   // Step 1  import Add from './components/'
  // Step 2  components: {
   Add
  },
  // Initialized data in the App component   data(){
   return {
    comments: [{
     name: 'Bob',
     content: 'Vue is pretty good'
    }, {
     name: 'Cat',
     content: 'Vue so Easy'
    }, {
     name: 'BZ',
     content: 'Vue so so'
    }
    ]
   }
  }
 }
&lt;/script&gt;


&lt;style&gt;

&lt;/style&gt;

&lt;script&gt;
  export default{
   // Declare receiving comments data   props: ['comments']

  }
&lt;/script&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.