vue 怎么創(chuàng)建組件及組件使用方法
什么是組件?
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能。在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。
我知道vue中核心就是組件,但是組件是什么呢?組件有什么用呢?
這里來說說怎么用組件?怎么樣創(chuàng)建自己的組件?:
1)創(chuàng)建自己的組件
通過vue.extend("template")
;通過vue構造器去拓展一個模板,然后注冊,最后使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>進一步了解component的話法糖</title> <script src="../vue.js"></script> </head> <body> <div>這是一個全局注冊的</div> <div id="app"> <parent></parent> </div> </body> </html> <script> var child= Vue.extend({template:'<p>this is child component</p>'}); //Vue.component("組件名",{});在注冊之前會自動創(chuàng)建(調用vue.extend()方法 ) //這是一個全局注冊(兼創(chuàng)建與注冊) Vue.component("parent",{//有時候我們可以省略,extend. template:'<div>this is parent component ------ {{text}} <child-component></child-component> </div>',//局部使用 components:{ "child-component":child,//局部注冊 }, //data:function(){} data(){ return {text:'哈哈哈,我是組件內部的text'} }, }); var vm= new Vue({ el:'#app', data:{}, });
進階一下:(組件內部在套組件,(components下面的components))
通過下面的例子,我就想說明一點,組件是vue構造器的拓展,所以組件可能擁有構造器的幾乎所有屬性(在寫這篇博客前,我們沒有聽到這個說法,所以可能是錯的,不要信)
<body> <div>這是一個局部注冊</div> <div id="app1"> <div><button v-on:click=get>這里觸發(fā)get方法</button></div> <parent-components></parent-components> </div> </body> <script> // var child=Vue.extend({template:"<span> ------child element------</span>"}); var vp=new Vue({ el:'#app1', data:{}, methods:{ get:function(){alert("這是構造器中get(全局)");} }, components:{ "parent-components":{ template:"<div>---------<span> parent components</span><p><button v-on:click=get>點擊觸發(fā)parent的get</button></p> <div><child-component></child-component></div>--------</div>", components:{ //局部注冊再一次局部注冊 "child-component":{ template:"<span> ------child <button v-on:click=get>點擊觸發(fā)child中的get方法</button>element------</span>", methods:{ get:function(){ alert("這是局部注冊child-component組件中get"); } } } }, methods:{ get:function(){ alert("這是蟬聯(lián)注冊parent-components里面的方法"); } }, }, }, }); </script>
你知道嗎?一個components中可以定義多個組件:
將html,寫入components是不是覺得很low呢?當template的內容太多了,是不是不堪入目呢?那我們來使用一下vue組件的語法糖吧(不知道為啥叫這個名)
值得提醒你的事:組件中的data屬性要定義成一個函數,返回一個對象,
<script type="text/x-template" id="myComponent"> <div> <span>{{msg}}</span> </div> </script> <template id='myCom'> <span>{{msg}}</span> </template> <div id="app"> <parent-component-script></parent-component-script> <parent-component-tem></parent-component-tem> </div> var vm=new Vue({ el:"#app", data:{}, components:{ "parent-component-script":{ template:'#myComponent', data(){return{msg:'這里是script'};}, }, "parent-component-tem":{ template:'#myCom', data(){return{msg:'這里是template'} } }, }, });
你也可以更狠一點:的創(chuàng)建方式
值得注意的是:組件中的props中屬性值,定義時是駝峰,使用時就要變?yōu)橹袆澗€
<div id="app"> <son :son-counter="counter"></son> <p>parent:<input type="text" v-model="counter"/></p> </div> const son={ template:`<div>son:<input v-model="sonCounter" /></div>`, props:{sonCounter:Number}, }; var app=new Vue({ el:'#app', data:{ counter:0, }, components:{ son } });
最后一個提醒:組件的創(chuàng)建要在,vue實例化之前。
總結
以上所述是小編給大家介紹的vue 怎么創(chuàng)建組件及組件使用方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
vue3中路由傳參query、params及動態(tài)路由傳參詳解
vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關于vue3中路由傳參query、params及動態(tài)路由傳參的相關資料,需要的朋友可以參考下2022-09-09vue使用axios獲取不到響應頭Content-Disposition的問題及解決
這篇文章主要介紹了vue使用axios獲取不到響應頭Content-Disposition的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04基于Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能
這篇文章主要介紹了基于Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01