當前位置：首頁 > 前端技术 > vue >内容正文

vue

【Vue学习第三天】组件的使用

發布時間：2025/4/5 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vue学习第三天】组件的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

整理的內容

Vue中組件的一些用法和概念

創建組件
父子組件傳值
組件的切換
使用slot分發內容

什么是組件

組件的出現，就是為了拆分Vue實例的代碼量，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來需要什么樣的功能，就可以去調用對應的組件即可。【組件化和模塊化的不同】

模塊化:是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的職能單一；
組件化:是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；

組件的注冊

全局注冊

簡單的方法是通過Vue.component()方法進行注冊，下面是一個demo

通過Vue中的template來定義模板，這樣可以有語法高亮和提示；也可以用字面量的形式來定義模板
組件注冊的時候使用的是駝峰命名，在使用的時候不能使用駝峰命名，使用小短線連接的方式
組件的內部和定義一個Vue實例差不多，但是需要注意的是組件中的data是一個函數，且這個函數返回的是一個對象。
模板的要求：只能有一個根元素，這時候可以用一個div包裹

<body><div id="app"><my-com></my-com></div><template id="tmpl1"><div><h1>這是全局定義的組件 --- {{ msg }}</h1><input type="button" value="show" @click="show"></div></template> </body> <script>Vue.component('myCom',{template:"#tmpl1",data(){return {msg:"hello world"}},methods:{show(){console.log("show");}}})new Vue({el:"#app",}) </script> 復制代碼

局部注冊

通過components屬性在組件內部定義，此時的組件只能在定義的Vue實例中使用，其他規則與全局定義相同

var app = new Vue({el: '#app',data: {},components: {'my-component': {template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>`,}}}) 復制代碼

為什么組件中的data是一個返回對象的函數

JS中對象類型的變量實際上保存的是對象的引用
組件的開發是為了方便UI的復用，如果直接傳入一個對象則存在多個這樣的組件時，會共享數據，導致一個組件中數據的改變會引起其他組件數據的改變。而使用一個返回對象的函數，每次使用組件都會創建一個新的對象，這樣就不會出現__共享數據__的問題來了。

父子組件之間進行數據傳遞

父子組件之間的通信就是__?props__?down,events?up，父組件通過屬性props向下傳遞數據給子組件，子組件通過事件events?給父組件發送消息。具體過程如下:

父組件把數據通過prop傳遞給子組件（屬性需要提前在子組件中注冊）；
子組件內部得到傳遞過來的值，就可以進行相應的操作；
當子組件內部發生了一些變化，希望父組件能知道時，就利用代碼觸發一個自定義事件，把一些數據發送出去
父組件通過將自身methods中的方法綁定到子組件的自定義方法上，當子組件觸發自定義事件發送的數據，就作為父組件的方法的參數被傳進來
然后父組件就可以根據這些數據，進行相應的操作

屬性 props

Vue 組件可以通過聲明一個props屬性來接收父組件傳遞過來的值。demo

<body><div id="app"><h2>父組件的count:{{count}}</h2><child-com :init-count="count"></child-com></div><template id="tmp1"><div>{{ initCount }}<input type="button" value="+1" @click="add"></div></template> </body> <script>Vue.component("childCom", {template: "#tmp1",props: ['initCount'],data() {return {count: 0,}},methods: {add() {this.initCount += 1;}}})new Vue({el: "#app",data: {count: 0}}) </script> 復制代碼

通過一個demo來分析一下需要注意的地方，上面的demo父組件通過initCount向子組件傳遞一個count值，然后在子組件中通過+1操作，試圖修改父組件中的值 【注意點】 1.在屬性注冊的時候若是駝峰命名，需要修改為短線連接的方式 2.在子組件中直接修改父組件傳遞過來的屬性值會報警告，如果確實有這個修改值的需要則可以采用下面的兩種方法。

修改后的值需要同步到父組件中，使用 .sync 此時還是會報警告，但是數據已經同步

<child-com :init-count.sync="count"></child-com> 復制代碼add() {this.initCount += 1;this.$emit('update:initCount',this.initCount); //觸發update事件 } 復制代碼

只在子組件中修改，重新定義個變量來接受數據，如果傳入的是引用類型的數據則需要通過深拷貝

props: ['initialCounter'], data: function () {return { counter: this.initialCounter } // 如果是一般的數據類型，可以這樣操作 } 復制代碼

使用v-bind的形式向子組件傳值

v-bind會將傳入的值解釋為表達式并能夠實現動態綁定，而直接傳入的時候會被解析為字符串。

<comp some-prop="1"></comp> 復制代碼 <comp v-bind:some-prop="1"></comp> 復制代碼

Prop驗證

Vue.component('example', {props: {// 基礎類型檢測 (`null` 意思是任何類型都可以)propA: Number,// 多種類型propB: [String, Number],// 必傳且是字符串propC: {type: String,required: true},// 數字，有默認值propD: {type: Number,default: 100},// 數組/對象的默認值應當由一個工廠函數返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定義驗證函數propF: {validator: function (value) {return value > 10}}} }) 復制代碼

type?可以是下面原生構造器：

String
Number
Boolean
Function
Object
Array
Symbol type?也可以是一個自定義構造器函數，使用?instanceof?檢測。

// 自定義Person構造器function Person(name, age) {this.name = namethis.age = age}Vue.component('my-component', {template: `<div>名字: {{ person-prop.name }}，年齡： {{ person-prop.age }} </div>`,props: {person-prop: {type: Person // 指定類型}}})new Vue({el: '#app2',data: {person: 2 // 傳入Number類型會報錯}}) 復制代碼

自定義事件

子組件通過自定義事件向父組件傳遞數據

<div id="app3"><my-component2 v-on:myclick="onClick"></my-component2> </div> <script>Vue.component('my-component2', {template: `<div><button type="button" @click="childClick">點擊我觸發自定義事件</button></div>`,methods: {childClick () {this.$emit('myclick', '這是我暴露出去的數據', '這是我暴露出去的數據2')}}})new Vue({el: '#app3',methods: {onClick () {console.log(arguments)}}}) </script> 復制代碼

如上所示，共分為以下步驟：

子組件在自己的方法中將自定義事件以及需要發出的數據通過以下代碼發送出去this.$emit('myclick',?'這是我暴露出去的數據',?'這是我暴露出去的數據2') 復制代碼

第一個參數是自定義事件的名字
后面的參數是依次想要發送出去的數據

父組件利用v-on為事件綁定處理器<my-component2?v-on:myclick="onClick"></my-component2> 復制代碼這樣,在Vue實例的methods方法中就可以調用傳進來的參數了

注意：在使用v-on綁定事件處理方法時，不應該傳進任何參數，而是直接寫v-on:myclick="onClick",不然，子組件暴露出來的數據就無法獲取到了

組件的切換

通過Vue的<component>標簽可以實現組件的動態切換，讓多個組件使用一個掛載點?

<body><div id="app"><div><a href="" @click.prevent="comName='com1'">com1</a><a href="" @click.prevent="comName='com2'">com2</a></div><component :is="comName"></component></div> </body> <script>Vue.component("com1",{template:"<h1>com1</h1>"})Vue.component("com2",{template:"<h1>com2</h1>"})new Vue({el:"#app",data:{comName:"com1"},}) </script> 復制代碼

通過component標簽的is屬性動態的切換組件，這里的is綁定的值是注冊的組件的名字。

如果想要在每次切換組件的時候保存組件的狀態，可以使用<keep-alive>標簽將<component>標簽包裹起來

使用slot分發內容

slot是用來實現組件嵌套的，相當于是一個占位符，將嵌套的內容填入占位符中

當子組件中沒有slot時，父組件放在子組件標簽內的東西將被丟棄；

子組件的slot標簽內可以放置內容，當父組件沒有放置內容在子組件標簽內時，slot中的內容會渲染出來；

當父組件在子組件標簽內放置了內容時，slot中的內容被丟棄子組件模板:

<div><h2>我是子組件的標題</h2><slot>只有在沒有要分發的內容時才會顯示。</slot> </div> 復制代碼

父組件模板：

<div><h1>我是父組件的標題</h1><my-component><p>這是一些初始內容</p></my-component> </div> 復制代碼

渲染結果：

<div><h1>我是父組件的標題</h1><div><h2>我是子組件的標題</h2><p>這是一些初始內容</p></div> </div> 復制代碼

具名slot

slot可以有很多個。那么子組件對于父組件放置的多余的內容如何放到各個slot中呢？方法就是子組件給每個slot起一個名字name，父組件放置多余的元素時，給每個元素的slot屬性分配一個代表slot的名字。到時候，多余的內容就會根據自己的slot屬性去找具有對應名字的slot元素。

子組件可以有一個匿名的slot，當分發的多余內容找不到對應的slot時，就會進入這里面

如果子組件沒有匿名的slot，當分發的多余內容找不到對應的slot時，就會被丟棄子組件模板app:

<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer> </div> 復制代碼

父組件模板:

<div><app><h1 slot="header">這里可能是一個頁面標題</h1><p>主要內容的一個段落。</p><p>另一個主要段落。</p><p slot="footer">這里有一些聯系信息</p></app> </div> 復制代碼

渲染之后:

<div class="container"><header><h1>這里可能是一個頁面標題</h1></header><main><p>主要內容的一個段落。</p><p>另一個主要段落。</p></main><footer><p>這里有一些聯系信息</p></footer> </div> 復制代碼

作用域slot

總結

以上是生活随笔為你收集整理的【Vue学习第三天】组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

组件
Vue