vue父子組件的嵌套的示例代碼
更新時間:2017年09月08日 09:30:31 作者:qq_24849765
本篇文章主要介紹了vue父子組件的嵌套的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了vue父子組件的嵌套的示例代碼,分享給大家,具體如下:
組件的注冊:
先創(chuàng)建一個構造器
var myComponent = Vue.extend({ template: '...' })
用Vue.component注冊,將構造器用作組件(例為全局組件)
Vue.component('my-component' , myComponent)
注冊局部組件:
var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父組件模板內 'my-component': Child } })
注冊語法糖,簡化過程
// 在一個步驟中擴展與注冊 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>
頁面顯示:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個方法,它主要用于DOM操作,當我們修改Vue組件中的數據時,Vue.js會在下次事件循環(huán)前自動更新視圖,并異步執(zhí)行$nextTick()中的回調函數,本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue3中使用VueParticles實現粒子動態(tài)背景效果
為了提高頁面展示效果,特別類似于登錄界面內容比較單一的,粒子效果作為背景經常使用到,vue工程中利用vue-particles可以很簡單的實現頁面的粒子背景效果,本文給大家分享vue粒子動態(tài)背景效果實現代碼,需要的朋友參考下吧2022-05-05詳解vue-cli之webpack3構建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構建全面提速優(yōu)化,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12