1、組件個人理解：

<組件>是頁面的一部分，將界面切分成部分，每部分稱為 <組件>

2、組件化思想：

//2.1、定義一個全局的組件，組件支持‘駝峰命名’規則 Vue.component("TodoItem",{props: ['content'], //接收父組件傳遞過來的數據template: "<li>{{content}}</li>"})循環遍歷 list , 每一次遍歷都把值給 item , item 再通過 v-bind 把值傳遞給 content , compoent 通過 props 獲取傳遞過來的數據。list 決定輸出多少個 todo-item 組件<ul><todo-item v-for="item in list" v-bind:content="item"></todo-item></ul> //2.2、局部組件局部組建的使用，需要注冊到 vue 父組件模版中 var TodoItem = {props:['content'],template:"<li>{{content}}</li>" }var app = new Vue({el:'#app',components:{TodoItem:TodoItem},data:{list:[],inputValue:''},methods:{submit:function () {this.list.push(this.inputValue);this.inputValue = '';}} }); //2.3、父組件向子組件傳值 <todo-item v-for="item in list" v-bind:key="item"></todo-item> 通過 v-bind?即可實現父組件向子組件傳值，子組件只需要通過 props:['key']?即可獲取父組件傳遞的數據 //2.4、子組件向父組件傳值 1、父組件可以使用 props 把數據傳給子組件。 2、子組件可以使用 $emit 觸發父組件的自定義事件。 vm.$emit( event, arg ) //觸發當前實例上的事件 vm.$on( event, fn );//監聽event事件后運行 fn； var TodoItem = {props:['content','index'],template:"<li @click='handleItemClick'>{{content}}</li>",methods:{handleItemClick: function(){this.$emit("delete",this.index);//觸發父組件 delete 綁定事件,index：為參數 }} }var app = new Vue({el:'#app',components:{TodoItem:TodoItem},data:{list:[],inputValue:''},methods:{} });

總結

以上是生活随笔為你收集整理的1、vue 笔记之 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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