当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue组件模板及组件互相引用代码实例

Vue组件模板及组件互相引用代码实例

2020年05月10日  | 移动技术网IT编程  | 我要评论

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网