vue學(xué)習(xí)筆記-03-淺談組件-概念，入門，如何用props給組件傳值？

文章目錄

• vue學(xué)習(xí)筆記-03-淺談組件-概念，入門，如何用props給組件傳值？
• 什么是組件？
• 為什么要使用組件？
• 如何使用組件呢？
• • hello，組件
  • 如何給組件里面?zhèn)鬟f參數(shù)呢？
  • 組件的注冊分為全局注冊和局部注冊
  • 思考一下，如果是多個屬性傳入組件呢？

什么是組件？

??組件是可復(fù)用的 Vue 實例，說白了就是一組可以重復(fù)使用的模板，跟 JSTL 的自定義標(biāo)簽、Thymeleaf 的 th:fragment等框架有著異曲同工之妙。通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：

為什么要使用組件？

??你可以將組件進行任意次數(shù)的復(fù)用，減少代碼量，提高代碼的重用性，比如側(cè)邊欄，搜索框之類的。
??組件系統(tǒng)是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，任意類型的應(yīng)用界面都可以抽象為一個組件樹。

如何使用組件呢？

vue.js官網(wǎng)講解組件

下面我們一起來看看怎么初步使用它吧：

hello，組件

<script type="text/javascript">// 先注冊組件Vue.component('my-component-li', {template: '<li>Hello li</li>'});// 再實例化 Vuevar vm = new Vue({el: '#vue'});</script><div id="vue"><ul><!--使用自定義的組件--><my-component-li></my-component-li></ul></div>

• Vue.component()：注冊組件
• my-component-li：自定義組件的名字
• template：組件的模板

如何給組件里面?zhèn)鬟f參數(shù)呢？

??向上面那種一點用都沒有223，因為沒有參數(shù)傳進去，意義性不大，如果需要傳遞參數(shù)進去，則需要props屬性了

??ps：props里面的屬性值不能大寫

<script type="text/javascript">// 先注冊組件Vue.component('my-component-li', {props: ['item'],template: '<li>Hello {{item}}</li>'});// 再實例化 Vuevar vm = new Vue({el: '#vue',data: {items: ["張三", "李四", "王五"]}});</script><div id="vue"><ul><my-component-li v-for="item in items" v-bind:item="item"></my-component-li></ul></div>

說明：

• v-for=“item in items”：遍歷 Vue 實例中定義的名為 items 的數(shù)組，并創(chuàng)建同等數(shù)量的組件
• v-bind:item=“item”：將遍歷的 item 項綁定到組件中 props 定義的名為 item 屬性上；= 號左邊的 item 為 props 定義的屬性名，右邊的為 item in items 中遍歷的 item 項的值
• 可以這么理解，數(shù)據(jù)的流向是：先從data種items流向了v-for中的item，然后再由item流向了props中的item。

組件的注冊分為全局注冊和局部注冊

全局注冊:

Vue.component('my-component-name', {// ... options ...})

??全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創(chuàng)建的 Vue 根實例，也包括其組件樹中的所有子組件的模板中。
??到目前為止，關(guān)于組件注冊你需要了解的就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把組件注冊讀完。

思考一下，如果是多個屬性傳入組件呢？

比如：

new Vue({el: '#blog-post-demo',data: {posts: [{ id: 1, title: 'My journey with Vue' },{ id: 2, title: 'Blogging with Vue' },{ id: 3, title: 'Why Vue is so fun' }]}})

這個時候怎么動態(tài)綁定呢？

<blog-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"></blog-post>

??如上所示，你會發(fā)現(xiàn)我們可以使用 v-bind 來動態(tài)傳遞 prop。這在你一開始不清楚要渲染的具體內(nèi)容，比如從一個 API 獲取博文列表的時候，是非常有用的。

??到目前為止，關(guān)于 prop 你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把 prop 讀完。

總結(jié)

以上是生活随笔為你收集整理的vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。