Vue組件模板及組件互相引用代碼實(shí)例
更新時間：2020年03月11日 12:50:46 作者：我太難了008
這篇文章主要介紹了Vue組件模板及組件互相引用代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
1. vue組件都是由這三部分組成
<template>
<div>
</div>
</template>
<script>
export default{}
</script>
<style>
</style>
2. 組件間的引用
分3步走，假設(shè)現(xiàn)在有兩個組件 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ù)，注意冒號
<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 還不錯'
}, {
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue移動端實(shí)現(xiàn)手機(jī)左右滑動入場動畫
這篇文章主要為大家詳細(xì)介紹了vue移動端實(shí)現(xiàn)手機(jī)左右滑動入場動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
Vue項目報錯：Uncaught SyntaxError: Unexpected token <
這篇文章主要介紹了Vue項目報錯：Uncaught SyntaxError: Unexpected token <，在引入第三方依賴的 JS 文件時，遇到的一個問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
公共組件父子依賴調(diào)用及子校驗(yàn)父條件問題解決
這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗(yàn)父組件條件的問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue Router history模式的配置方法及其原理,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下2018-03-03
vue如何使用vant組件的field組件disabled修改默認(rèn)樣式
這篇文章主要介紹了vue如何使用vant組件的field組件disabled修改默認(rèn)樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇淺談vue方法內(nèi)的方法使用this的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)兩個區(qū)域滾動條同步滾動
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)兩個區(qū)域滾動條同步滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文介紹了如何在Vue3中注冊和使用全局組件,并解決了通過template定義組件時出現(xiàn)的警告問題,具體方法是在vite.config.js文件中配置Vue構(gòu)建版本為vue.esm-bundler.js,以支持運(yùn)行時編譯,此操作確保全局組件可以正常工作并解決了編譯警告2024-10-10
Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07