在專案過程中，會有很多重複功能在多個頁面中處理，此時則需要把這些重複的功能進行單獨拎出，編寫公用元件(控制項)進行引用。在vue中，元件是可復用的vue例項，此時元件中的data必須是乙個函式，因為data是乙個函式時，每次引用此元件時相當於重新對返回物件進行獨立的拷貝(例項化/new)，如果data不是乙個函式而是乙個物件，那麼多個引用同一元件時其中乙個引用更改資料，其他引用中的資料都會更改。由於業務的不同，元件中的資料互動也會不同。
prop可以在元件上註冊一些自定義特性，當乙個值傳遞給乙個prop特性的時候，它就變成了那個元件(子元件)例項的乙個屬性，可以像訪問data中的值一樣去訪問prop中的特性(屬性列表)。任何型別的值都可以傳給乙個prop，prop使得其父子prop之間形成乙個單向下行繫結，即資料是在父元件中更改後才繫結到子元件中，父元件每次發生更新，子元件中所有的prop都將會重新整理為最新的值。
prop的常見書寫方式如：
1.2.1 子元件示例**
子元件props中需要包含父元件流向的資料資訊，以便顯示在子元件中(可以直接頁面繫結}，也可資料接收處理)。
姓名：}性別：}
年齡：}
1.2.2 父元件示例**
父元件中對子元件傳遞的資料像使用屬性一樣的去傳遞。
父元件直接訪問子元件時，需要使用ref為子元件指定乙個引用id，渲染完成後即為指定子元件的例項，即可操作其內方法。
1.3.1 子元件示例**
子元件methods中需要包含父元件所呼叫的子元件方法，可以傳遞引數值從父元件至子元件，以便來更改或操作子元件中的某些資料。
子元件按鈕
1.3.2 父元件示例**
在父元件中，子元件使用ref來註冊引用資訊，引用資訊將會註冊在父元件的$refs物件上。
注意：ref被用來給元素或子元件註冊引用資訊，如果是dom元素，引用只想的就是dom元素，如果是元件，引用就指向元件例項。
父元件按鈕
在子元件裡用$emit向父元件觸發乙個事件，父元件監聽這個事件。
1.4.1 子元件示例**
子元件methods中去註冊能夠呼叫父元件方法的入口。
子元件按鈕
1.4.2 父元件示例**
父元件的子元件中使用事件進行監聽所需呼叫的方法，其中@後跟隨的是子元件中註冊的自定義事件名，後邊所呼叫的方法為父元件中所定義的方法名。
}
注意：也可直接props傳遞方法進行子元件呼叫父元件方法。
在實際專案應用中，很多時候需要實時的獲取到子元件中的資料資訊，即子元件資料更改父元件資料。此時就需要監控子元件資料是否更改(watch)，而子元件則需要進行計算其資料集(computed)
2.1.1 父元件示例**
子元件每次呼叫時都需要是重新例項化的(每次呼叫子元件才會是單獨的元件)，故可以使用v-if來進行處理
type='primary'@click='addperson()'>新增type='primary'@click='editperson()'>編輯
v-model='childmodalvisible'title="新增人員"width='800'@on-cancel='canclemodal'closable>
if="childmodalvisible" ref="childupdate" :data='objchild' />
取消確定
姓名：}
性別：}
2.1.2 子元件示例**
通過監控子元件資料更新去更新父元件資料資訊，使用watch；
通過計算屬性去判斷父元件資料更新賦值於子元件資料，使用computed
ref='childpersonform':model='childpersonform':rules='formrules':label-width='90'>
子元件更新過程
父元件更新過程
銷毀過程
vue 父元件與子元件的互動
我們在進行vue開發時會將公共的部分進行抽象，然後生成乙個獨立的元件，這個元件可以被其它頁面引用，如果希望有互動的動作就設計到了值的傳遞，或者方法的 等問題，這一次我們主要來說一下父元件和子元件的互動。子元件，通過定義了prods，然後可以實現從父元件向子元件的傳遞 呼叫父元件的方法 父元件 頁面，...
vue學習筆記（父元件與子元件互動）
父元件往子元件menu bar傳值父 傳遞值子 接收值props fontsizelist array,defaultfontsize number 父元件呼叫子元件函式父 methods 子 methods 子元件呼叫父元件函式並傳值 子 methods 父 methods 定義乙個共用js，例如...
vue元件，父元件與子元件之間通訊
vue元件，元件是乙個可復用的功能模組，即將具有相同功能的模組抽取成乙個元件，在需要的地方引用即可，這體現了 封裝的思想，下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...