組件02數(shù)據(jù)傳遞03自定義事件04內(nèi)容分發(fā)05動(dòng)態(tài)組件AI輔助編程06注冊(cè)組件01注冊(cè)組件注冊(cè)全局組件注冊(cè)局部組件注冊(cè)全局組件ponent(tagName,options)定義的組件名稱(chēng)組件的選項(xiàng)對(duì)象語(yǔ)法格式

<tagName></tagName>使用組件的方式注冊(cè)全局組件<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({});ponent('demo',{template:'<h2>天才出于勤奮</h2>'});vm.mount('#app');</script>注冊(cè)全局組件<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({});ponent('demo',{template:`<div><p>靜夜思</p><div>床前明月光，</div><div>疑是地上霜。</div><div>舉頭望明月，</div><div>低頭思故鄉(xiāng)。</div></div>`});vm.mount('#app');</script>注冊(cè)全局組件<divid="app"><count-button></count-button><count-button></count-button><count-button></count-button></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({});

ponent('count-button',{data(){return{count:0}},template:'<buttonv-on:click="count++">{{count}}</button>'});

vm.mount('#app');</script>注冊(cè)局部組件components使用選項(xiàng)<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({components:{'demo':{template:'<h2>目標(biāo)越接近，困難越增加。</h2>'}}}).mount('#app');</script>注冊(cè)局部組件<divid="app"><parent></parent></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">varChild={template:'<h2>人不學(xué)，不知道。</h2>'}varParent={template:`<div><h2>玉不琢，不成器。</h2><child></child></div>`,components:{'child':Child}}constvm=Vue.createApp({components:{'parent':Parent}}).mount('#app');</script>什么是Prop傳遞動(dòng)態(tài)PropProp驗(yàn)證數(shù)據(jù)傳遞什么是Prop<divid="app"><demotext="黑夜無(wú)論怎樣悠長(zhǎng)，白晝總會(huì)到來(lái)。"></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({components:{'demo':{props:['text'],template:'<h3>{{text}}</h3>'}}}).mount('#app');</script>實(shí)現(xiàn)父子組件之間數(shù)據(jù)的傳遞props使用選項(xiàng)傳遞動(dòng)態(tài)Prop

應(yīng)用動(dòng)態(tài)Prop傳遞數(shù)據(jù)，輸出影片的圖片、名稱(chēng)和類(lèi)型等信息。實(shí)例Prop驗(yàn)證基礎(chǔ)類(lèi)型檢測(cè)props:{propA:String}參數(shù)默認(rèn)props:{propD:{type:Number,default:100}}多種類(lèi)型props:{propB:[String,Number]}參數(shù)必須props:{propC:{type:String,required:true}}自定義驗(yàn)證函數(shù)props:{propE:{validator:function(value){returnvalue>0;}}}自定義事件自定義事件的監(jiān)聽(tīng)和觸發(fā)將原生事件綁定到組件自定義事件的監(jiān)聽(tīng)和觸發(fā)vm.$emit(eventName,[…args])傳入事件的名稱(chēng)觸發(fā)事件傳遞的參數(shù)語(yǔ)法格式

$emit()方法自定義事件的監(jiān)聽(tīng)和觸發(fā)

在頁(yè)面中定義一個(gè)按鈕和一行文本，通過(guò)單擊按鈕實(shí)現(xiàn)設(shè)置文本間距的功能。實(shí)例自定義事件的監(jiān)聽(tīng)和觸發(fā)

在頁(yè)面中制作一個(gè)簡(jiǎn)單的導(dǎo)航菜單效果。實(shí)例將原生事件綁定到組件<divid="app"><demo:style="show"v-on:mouseover="setWeight('bold')"v-on:mouseout="setWeight('')"></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{size:'20px',weight:'',cursor:'pointer‘}},methods:{setWeight:function(value){this.weight=value;}},computed:{show:function(){return{fontSize:this.size,fontWeight:this.weight,cursor:this.cursor}}}});ponent('demo',{template:'<span>非淡泊無(wú)以明志，非寧?kù)o無(wú)以致遠(yuǎn)。</span>'})vm.mount('#app');</script>內(nèi)容分發(fā)基礎(chǔ)用法編譯作用域默認(rèn)內(nèi)容命名插槽作用域插槽基礎(chǔ)用法<divid="app"><demo-slot>{{msg}}</demo-slot></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{

msg:'真誠(chéng)是一種心靈的開(kāi)放。'}}});

ponent('demo-slot',{template:`<divclass="content"><slot></slot></div>`})

vm.mount('#app');</script>渲染結(jié)果<div

class="content">

真誠(chéng)是一種心靈的開(kāi)放</div><slot>元素編譯作用域<divid="app"><demo-slot>{{msg}}</demo-slot></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({});

ponent('demo-slot',{data(){return{

msg:'真誠(chéng)是一種心靈的開(kāi)放。'}},template:`<divclass="content"><slot></slot></div>`})

vm.mount('#app');</script>渲染結(jié)果<divclass="content">

</div>默認(rèn)內(nèi)容<divid="app"><my-checkbox>{{text}}</my-checkbox></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{text:'已閱讀并同意服務(wù)條款'}}});

ponent('my-checkbox',{template:`<div><inputtype="checkbox"><slot>閱讀并同意服務(wù)條款</slot></div>`})

vm.mount('#app');</script>命名插槽<slot>元素的name屬性v-slot指令值作為其參數(shù)具名插槽

在頁(yè)面中輸出個(gè)人信息，包括姓名、性別、年齡、職位和興趣愛(ài)好，并將姓名作為默認(rèn)插槽的內(nèi)容。實(shí)例作用域插槽<slot>元素的屬性插槽Prop為v-slot設(shè)置一個(gè)包含所有插槽Prop的對(duì)象的名稱(chēng)作用域插槽<divid="app"><demo-slot><templatev-slot:default="slotProps">

人物姓名：{{slotProps.pname}}<br>

代表作品：{{slotProps.works}}</template></demo></div><scriptsrc=