Vue.component的屬性說明
更新時間：2022年03月29日 08:52:47 作者：程序員徐小白
這篇文章主要介紹了Vue.component的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue.component的屬性
Vue.component(‘組件名稱’，{})中的屬性
1.template
作用：用來定義組件的html模板
使用：直接接字符串
Vue.component('組件名稱'，
{
template:'<p>aaa</p>'
})2.data
作用：
定義一個在組件中使用的數(shù)據(jù)
定義：
Vue.component('組件名稱'，
{
?? ?data:fuction(){
?? ??? ?return(
?? ??? ??? ?msg:'aa'
?? ??? ??? ?//每個組件使用的數(shù)據(jù)都是獨立的
?? ??? ??? ?//每個數(shù)據(jù)都是新創(chuàng)建的
?? ??? ??? ?//就算用的是同一個組件模板
?? ??? ??? ?//var a=0
?? ??? ??? ?//而直接return a
?? ??? ??? ?//則會多個頁面上的組件同時使用同一個數(shù)據(jù)源
?? ??? ?)
?? ?}
})使用：
使用插值表達式{undefined{msg}}
3.methods
作用：
定義一個在組件中使用的方法
定義：
Vue.component('組件名稱'，
{
?? ?methods:{
?? ??? ?方法名(){}
?? ?}
})4.props
作用：
將父組件的數(shù)據(jù)傳遞到子組件
定義：
Vue.component('組件名稱'，
{
props:['對接父組件數(shù)據(jù)的名稱'],
})與data中的區(qū)別：
props是從父組件傳遞過來的，只能讀取，不能修改父組件中的值
data是子組件私有的，可讀可寫
Vue的component標簽
作用
可以在一個組件上進行多樣化渲染。例如：選項卡
is屬性
<div id="father">
<component is="one"></component>
<component is="two"></component>
</div>
<script>
Vue.component('one', {
template: `
<div>我是第一個組件</div>
`
})
Vue.component('two', {
template: `
<div>我是第二個組件</div>
`
})
let vm = new Vue({
el: "#father"
})
</script>
可以看到通過coponent的is屬性可以綁定不同的組件，渲染不同的模板。
那么我們是不是可以通過這個屬性來完成一個屬性多種模板的效果呢
<div id="app">
<button @click="onclick('hc-c')">顯示第一個</button>
<button @click="onclick('hc-b')">顯示第二個</button>
<component :is="name"></component>
</div>
<script>
Vue.component('hc-c', {
template: `
<div>我是第一個</div>
`
})
Vue.component('hc-b', {
template: `
<div>我是第二個</div>
`
})
let vm = new Vue({
el: "#app",
data:{
name:''
},
methods:{
onclick(item){
this.name = item;
}
}
})
</script>
可以看到，通過這個is屬性，我們可以達到選項卡的效果
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2018-01-01
這篇文章主要介紹了關于vue設置環(huán)境變量全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要分享可編寫 Vue v-for 循環(huán)的 7 種方式，在Vue中，基本上每個項目都會用到v-for循環(huán)。它們允許你在模板代碼中編寫for循環(huán)，接下來一起看看下面文章的詳細介紹吧2021-12-12
SpringBoot+Vue3實現(xiàn)文件的上傳和下載功能
上傳文件和下載文件是我們平時經(jīng)常用到的功能，接下來就讓我們用SpringBoot，Vue3和ElementPlus組件實現(xiàn)文件的上傳和下載功能吧，感興趣的朋友跟隨小編一起看看吧2023-01-01
使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
今天小編就為大家分享一篇關于vue-router命名視圖的使用講解，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章我們從 ast 生成時調用的 baseParse 函數(shù)分析，再到 baseParse 返回 createRoot 的調用結果，一直到細化的講解了 parseChildren 解析子節(jié)點函數(shù)中的其中某一個具體解析器的執(zhí)行過程。最后通過一個簡單模板舉例,需要的朋友可以參考下2021-09-09
Vue監(jiān)聽localstorage變化的方法詳解
在日常開發(fā)中,我們經(jīng)常使用localStorage來存儲一些變量,這些變量會存儲在瀏覽中,對于localStorage來說,即使關閉瀏覽器,這些變量依然存儲著,方便我們開發(fā)的時候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽localstorage的變化,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue文件樹組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
element-ui?table表格控件實現(xiàn)單選功能代碼實例
這篇文章主要給大家介紹了關于element-ui?table表格控件實現(xiàn)單選功能的相關資料,單選框是指在?Element?UI?的表格組件中,可以通過單選框來選擇一行數(shù)據(jù)。用戶只能選擇一行數(shù)據(jù),而不能同時選擇多行,需要的朋友可以參考下2023-09-09