vue父子組件的嵌套的示例代碼
本文介紹了vue父子組件的嵌套的示例代碼,分享給大家,具體如下:
組件的注冊:
先創(chuàng)建一個構(gòu)造器
var myComponent = Vue.extend({ template: '...' })
用Vue.component注冊,將構(gòu)造器用作組件(例為全局組件)
Vue.component('my-component' , myComponent)
注冊局部組件:
var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父組件模板內(nèi) 'my-component': Child } })
注冊語法糖,簡化過程
// 在一個步驟中擴(kuò)展與注冊 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 局部注冊也可以這么做 var Parent = Vue.extend({ components: { 'my-component': { template: '<div>A custom component!</div>' } } })
父子組件嵌套的例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <div id="app"> <parent></parent> </div> <script src="vue.js"></script> <script> var childComponent = Vue.extend({ template: '<p>this is child template</p>' }); Vue.component("parent",{ template: '<p>this is parent template</p><child></child><child></child>', components: { 'child': childComponent, } }); var app = new Vue({ el: '#app' }); </script> </body> </html>
其與以下寫法等價:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <template id="child"> <p>this is child template</p> </template> <template id="parent"> <p>this is parent template</p> <child></child> <child></child> </template> <div id="app"> <parent></parent> </div> <script src="vue.js"></script> <script> var childComponent = Vue.extend({ template: '#child' }); Vue.component("parent",{ template: '#parent', components: { 'child': childComponent, } }); var app = new Vue({ el: '#app' }); </script> </body> </html>
頁面顯示:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個方法,它主要用于DOM操作,當(dāng)我們修改Vue組件中的數(shù)據(jù)時,Vue.js會在下次事件循環(huán)前自動更新視圖,并異步執(zhí)行$nextTick()中的回調(diào)函數(shù),本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05基于webpack4+vue-cli3項(xiàng)目實(shí)現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項(xiàng)目的換膚功能,文中是通過scss+style-loader/useable做換膚功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue3中使用VueParticles實(shí)現(xiàn)粒子動態(tài)背景效果
為了提高頁面展示效果,特別類似于登錄界面內(nèi)容比較單一的,粒子效果作為背景經(jīng)常使用到,vue工程中利用vue-particles可以很簡單的實(shí)現(xiàn)頁面的粒子背景效果,本文給大家分享vue粒子動態(tài)背景效果實(shí)現(xiàn)代碼,需要的朋友參考下吧2022-05-05關(guān)于Vue Router的10條高級技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Vue Router的10條高級技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12