Shulou(Shulou.com)05/31 Report--

This article mainly introduces the Vue component template how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this Vue component template how to use the article will have a harvest, let's take a look at it.

1. Vue components are all composed of these three parts.

Export default {}

two。 References between components

Let's take three steps, suppose there are two components, App.vue, and Add.vue, and now we're going to introduce the Add.vue component into the App.vue component.

App.vue

/ / step 3 / / step 1 import Add from'. / components/Add.vue' / / step 2 components: {Add}}

3. Data transfer between components

If you are going to pass the data from the App.vue component to the Ad.vue component

App.vue

/ / step 3 / / transfer data Note the colon / / step 1 import Add from'. / components/Add.vue' / / step 2 components: {Add}, / / data initialized in the App component data () {return {comments: [{name: 'Bob', content:' Vue'}}, {name: 'Cat', content:' Vue so Easy'}, {name: 'BZ' Content: 'Vue so so'}]}

Add.vue

Export default {/ / declare receiving comments data props: ['comments']} this is the end of the article on "how to use component templates in Vue". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use component templates in Vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.