快捷導(dǎo)航

Vue組件模板及組件互相引用代碼實(shí)例

更新時(shí)間：2020年03月11日 12:50:46 作者：我太難了008

這篇文章主要介紹了Vue組件模板及組件互相引用代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1. vue組件都是由這三部分組成

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

2. 組件間的引用

分3步走，假設(shè)現(xiàn)在有兩個(gè)組件 App.vue，和 Add.vue，現(xiàn)在要把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. 組件間數(shù)據(jù)的傳遞

假將要將App.vue組件中的數(shù)據(jù)傳遞到Ad.vue組件中

App.vue

<template>
  // 第3步
  // 傳遞數(shù)據(jù)，注意冒號(hào)
  <Add :comments="comments"/>
</template>


<script>
   // 第1步
  import Add from './components/Add.vue'
  // 第2步
  components: {
   Add
  },
  // App組件中初始化的數(shù)據(jù)
   data(){
   return {
    comments: [{
     name: 'Bob',
     content: 'Vue 還不錯(cuò)'
    }, {
     name: 'Cat',
     content: 'Vue so Easy'
    }, {
     name: 'BZ',
     content: 'Vue so so'
    }
    ]
   }
  }
 }
</script>


<style>

</style>

Add.vue

<script>
  export default{
   // 聲明接收comments數(shù)據(jù)
   props: ['comments']

  }
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue傳值方式的十二種方法總結(jié)
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue移動(dòng)端下拉刷新和上滑加載
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-cli webpack 引入jquery的方法
小編使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具體內(nèi)容詳情大家參考下本文
2018-01-01
Vue3實(shí)現(xiàn)一個(gè)定高的虛擬列表
虛擬列表對(duì)于大部分一線開發(fā)同學(xué)來(lái)說(shuō)是一點(diǎn)都不陌生的東西了,這篇文章主要來(lái)教大家如何在2分鐘內(nèi)實(shí)現(xiàn)一個(gè)定高的虛擬列表,感興趣的可以了解下
2024-12-12
Vue 實(shí)用分頁(yè)paging實(shí)例代碼
本篇文章主要介紹了Vue 實(shí)用分頁(yè)paging實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
淺談vue父子組件怎么傳值
這篇文章主要介紹了淺談vue父子組件怎么傳值,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定(面試常見)
這篇文章主要介紹了使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定，在前端面試過(guò)程中經(jīng)常會(huì)問(wèn)到，文中主要實(shí)現(xiàn)v-model，v-bind 和v-click三個(gè)命令，其他命令也可以自行補(bǔ)充。需要的朋友可以參考下
2018-04-04
使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁(yè)及多條件查詢
Mock.js是一個(gè)模擬數(shù)據(jù)生成器,可以讓前端獨(dú)立于后端進(jìn)行開發(fā),下面這篇文章主要給大家介紹了關(guān)于使用Mockjs模擬接口實(shí)現(xiàn)增刪改查、分頁(yè)及多條件查詢的相關(guān)資料,需要的朋友可以參考下
2022-04-04
Vue3中的Refs和Ref詳情
這篇文章主要介紹了Vue3中的Refs和Ref，文章圍繞Vue3中的Refs和Ref得相關(guān)資料應(yīng)用舉例煩人方式展開詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11