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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。