前面的話
元件接受的選項大部分與vue例項一樣，而選項props是元件中非常重要的乙個選項。在 vue 中，父子元件的關係可以總結為 props down, events up。父元件通過 props 向下傳遞資料給子元件，子元件通過 events 給父元件傳送訊息。本文將詳細介紹vue元件選項props
父子級元件
在介紹props之前，先介紹父子級元件的寫法
在乙個良好定義的介面中盡可能將父子元件解耦是很重要的。這保證了每個元件可以在相對隔離的環境中書寫和理解，也大幅提高了元件的可維護性和可重用性
【錯誤寫法】
現在來介紹兩種父子級元件的錯誤寫法
下面這種形式的寫法是錯誤的，因為當子元件註冊到父元件時，vue.js會編譯好父元件的模板，模板的內容已經決定了父元件將要渲染的html
...執行時，它的一些子標籤只會被當作普通的html來執行，不是標準的html標籤，會被瀏覽器直接忽視掉
在父元件標籤之外使用子元件也是錯誤的
【正確寫法】
var childnode = } ',
props:['message']
靜態prop通過為子元件在父元件中的佔位符新增特性的方式來達到傳值的目的
var childnode = } ',
props:['message']
var parentnode = } ',
props:['mymessage']
var childnode = } ',
props:['my-message']
動態props
在模板中，要動態地繫結父元件的資料到子模板的 props，與繫結到任何普通的html特性相類似，就是用 v-bind。每當父元件的資料變化時，該變化也會傳導給子元件
var childnode = } ',
props:['mymessage']
var parentnode = }的型別是} ',
props:['mymessage'],
computed:
// 自定義驗證函式
propf: } ',
props:} ',
props:}
props:['childmsg']
var parentnode = }
components:
但是，定義的區域性變數counter只能接受initialcounter的初始值，當父元件要傳遞的值發生變化時，counter無法接收到最新值
var childnode = }
props:['childmsg'],
data()}
components: }
props:['childmsg'],
computed:}
components: }
props:['childmsg'],
data()}
components: {
'child': childnode
data(){
return {
'msg':'match'
// 建立根例項
new vue({
el: '#example',
components: {
'parent': parentnode
vue 獲取元件高度
vue獲取元素高度 當前區域 element div 獲取高度值 內容高 padding 邊框 let height this refs.element.offsetheight 100 獲取元素樣式值 存在單位 let height window.getcomputedstyle this ref...
vue獲取全域性元件 解析Vue全域性元件和區域性元件
vue中元件分為兩種 1.全域性元件 2.區域性元件 接下來我們看看兩種元件的區別 一 使用範圍 全域性元件使用範圍 可以在頁面中任何位置使用 區域性元件使用範圍 只能在定義它的el中使用，不能再其他位置使用，否則就無法生效 二 定義元件的方法 全域性元件 可以使用vue.component tag...
vue獲取全域性元件 Vue 全域性元件自動註冊
在 vue 中，我們通過 vue.component mycomponentname 的方式來進行全域性元件註冊，但如果需要全域性註冊的元件很多，這時 就會變得比較臃腫，例如 12 註冊 5 個全域性元件 import examplecomponent1 from components exampl...