(通過屬性繫結v-bind)
在引用子元件時,把需要傳遞給子元件的資料,以屬性繫結形式,傳遞到子元件內部,供子元件使用
子元件預設無法訪問到父元件中的data上資料和methods中方法
在呼叫子元件時,如果子元件用到父裡的值,在呼叫時繫結乙個屬性(屬性名隨意取,屬性值是要用的父裡data中的資料),屬性名在子元件裡props陣列中定義後,才可以使用
子元件中data裡資料和props裡資料區別
子元件中data資料是子元件自身私有的資料,可讀可寫
props裡資料都是通過父傳給子的,唯讀,無法重新賦值
html裡
vm例項裡
var vm = new vue(,
components:
},template: '',
props: ['father']}}
})
(通過事件繫結v-on)
呼叫子元件時繫結乙個事件函式(函式名隨意取,函式值是要用的父的methods的函式名)子template裡繫結子的方法,子方法裡要有this.$emit
(呼叫子元件時繫結的事件函式名,要傳的引數)
vm例項(父)
var vm = new vue(,
methods:
},components:
})
定義的子元件
var com =
},methods:
},}
呼叫的子元件
獲取dom元素和元件引用
在想要獲取的dom元素身上加上ref屬性,名字隨意取(ref=」myh1」),在vm例項方法中獲取元素this.$refs
.自己起的名字(this.$refs.myh1)
可以在呼叫子元件時加上ref屬性,在vm例項中獲取子元件中的data定義的資料和方法
Vue元件傳值 父子元件傳值
父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...
vue 元件傳值 父子元件傳值,兄弟元件傳值
父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...
Vue元件傳值
學習vue的傳值心得,剛入門vue,大佬勿噴,請多多指教。1.父元件傳值子元件 父元件巢狀子元件式,在標籤裡繫結 子元件用props屬性接收 例 父元件傳值,為縮寫,等同於v bind obj item props obj count 子元件接收傳值,可直接使用,但是推薦在下方重新賦值給新變數再使用...