1、組件個(gè)人理解：

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

2、組件化思想：

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

總結(jié)

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

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