Vue中组件模板怎么用

这篇文章将为大家详细讲解有关Vue中组件模板怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1. vue组件都是由这三部分组成

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

2. 组件间的引用

分3步走，假设现在有两个组件 App.vue，和 Add.vue，现在要把Add.vue组件引入到App.vue组件中

App.vue

<template>   // 第3步   <Add/> </template> <script>    // 第1步   import Add from './components/Add.vue'   // 第2步   components: {    Add   }  } </script> <style> </style>

3. 组件间数据的传递

假将要将App.vue组件中的数据传递到Ad.vue组件中

App.vue

<template>   // 第3步   // 传递数据，注意冒号   <Add :comments="comments"/> </template> <script>    // 第1步   import Add from './components/Add.vue'   // 第2步   components: {    Add   },   // App组件中初始化的数据    data(){    return {     comments: [{      name: 'Bob',      content: 'Vue 还不错'     }, {      name: 'Cat',      content: 'Vue so Easy'     }, {      name: 'BZ',      content: 'Vue so so'     }     ]    }   }  } </script> <style> </style>

Add.vue

<script>   export default{    // 声明接收comments数据    props: ['comments']   } </script>

关于“Vue中组件模板怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。