《Vue.js前端開發實戰（慕課版第2版）》課件 第9章 組件

組件02數據傳遞03自定義事件04內容分發05動態組件AI輔助編程06注冊組件01注冊組件注冊全局組件注冊局部組件注冊全局組件ponent(tagName,options)定義的組件名稱組件的選項對象語法格式

<tagName></tagName>使用組件的方式注冊全局組件<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({});ponent('demo',{template:'<h2>天才出于勤奮</h2>'});vm.mount('#app');</script>注冊全局組件<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>低頭思故鄉。</div></div>`});vm.mount('#app');</script>注冊全局組件<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>注冊局部組件components使用選項<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({components:{'demo':{template:'<h2>目標越接近，困難越增加。</h2>'}}}).mount('#app');</script>注冊局部組件<divid="app"><parent></parent></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">varChild={template:'<h2>人不學，不知道。</h2>'}varParent={template:`<div><h2>玉不琢，不成器。</h2><child></child></div>`,components:{'child':Child}}constvm=Vue.createApp({components:{'parent':Parent}}).mount('#app');</script>什么是Prop傳遞動態PropProp驗證數據傳遞什么是Prop<divid="app"><demotext="黑夜無論怎樣悠長，白晝總會到來。"></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({components:{'demo':{props:['text'],template:'<h3>{{text}}</h3>'}}}).mount('#app');</script>實現父子組件之間數據的傳遞props使用選項傳遞動態Prop

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

$emit()方法自定義事件的監聽和觸發

在頁面中定義一個按鈕和一行文本，通過單擊按鈕實現設置文本間距的功能。實例自定義事件的監聽和觸發

在頁面中制作一個簡單的導航菜單效果。實例將原生事件綁定到組件<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>非淡泊無以明志，非寧靜無以致遠。</span>'})vm.mount('#app');</script>內容分發基礎用法編譯作用域默認內容命名插槽作用域插槽基礎用法<divid="app"><demo-slot>{{msg}}</demo-slot></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

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

msg:'真誠是一種心靈的開放。'}}});

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

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

class="content">

真誠是一種心靈的開放</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:'真誠是一種心靈的開放。'}},template:`<divclass="content"><slot></slot></div>`})

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

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

const

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

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

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

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

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

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