vue的元件化給前端開發帶來極大的便利，這種依賴資料來控制dom的模式，區別於以前的開發控制dom的開發理念，這也導致了一種情況，在vue中是單向資料流的，意味著只能從父元件向子元件傳值，不允許子元件向父元件傳值。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。 ---vue教程
然而當我們把元件拆分到足夠細的時候，子元件控制父元件的資料，或者兄弟元件之間的傳值就變得尤為突出，這裡我將總結各式各樣的傳值，函式呼叫的方法。
父元件中的通訊方法
閱讀完官方文件後，我們一定會對props有強烈的印象，然而在父元件中可不止有這種通訊的方式。
props命名規範
html 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。這意味著當你使用 dom 中的模板時，camelcase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：
vue.component('blog-post', )傳遞靜態或動態 prop 假如你想傳字串給子元件只需要給便簽新增屬性就可以了
//這裡的title的內容就會傳給子元件
當然那些非字串的型別就直接依賴於v-bind進行傳值(number、boolean、array...)
v-bind:title="post.title + ' by ' + post.author.name"
子元件接收
常見的就是宣告式接收： props: [...] 陣列形式
// 定義乙個名為 button-counter 的新元件
vue.component('button-counter',
// 自定義驗證函式
propf: }
} //這裡不用宣告props可以直接呼叫
}mounted: function() }
性別：}男女
export default }來繼承父元件的值，在修改狀態的時候vue會提示不建議直接修改父元件的值來改變子元件(vue中乙個重要邏輯，當前元件只處理當前元件的資料)，所以我們使用childstatus來接收父元件的值。
那我們如何做到子元件的改變能影響父元件，父元件更新值時又能影響子元件呢？這時候重點都在這個watch上：
當status改變時則改變childstatus的值， 當childstatus改變時，用上面的方法與父元件通訊，改變父元件的值
這樣我們就完成子父元件的資料雙向繫結，整個過程為： 1. 給子元件幫乙個通訊方法 2. 繫結乙個傳值物件 3. 監控資料的變化
看到這裡有沒有熟悉的感覺，是不是跟 v-modle 很像，vue提供的雙向繫結的指令，而 v-modle 的本質就是繫結了乙個input的方法，和乙個value值，這時候我們就能把上面的雙向資料繫結的方法簡化了(v-modle是在本元件內實現雙向繫結，並沒有做到子父元件雙向繫結)
v-model/vm.$emit
還記得我上面講$slot的**嗎？這裡我們簡化一下：
//父元件
裝置品牌
export default {
data: {
brand:'預設'
//子元件
export default {
props: {
value: [string, number]
data() {
inputvalue: this.value
watch: {
value(newvalue) {
this.inputvalue = newvalue
inputvalue(newvalue) {
this.$emit('input', newvalue)
this.$parent
這個是vue提供的api，使用也很簡單，場景一般適合在父元件寫入多個子元件需要呼叫的公共方法，比provide/inject占用效能要低，也更明確作用域。
只需要在父元件註冊方法，在子元件這樣使用： this.$parent.parentfn(); 這裡要注意層級，也許是孫元件，或者從孫元件，可以這樣呼叫： this.$parent.$parent.grandfatherfn(); 只需要列印出當前的this.$parent檢視，確定層級即可。
vue 中幾種傳值方法
vue專案中，元件跟元件之間資料的傳遞是很普遍的行為，在這裡總結幾種常見的vue元件跟元件之間傳值方式，其中，主要有父子元件，非父子元件傳值。方法 父元件內設定要傳的資料，在父元件中引用的子元件上繫結乙個自定義屬性並把資料繫結在自定義屬性上，在子元件新增引數props接收即可。具體可參考官方文件。父...
VUE兄弟傳值方法 eventBus
建立乙個js檔案 eventbus.js import vue from vue const eventbus new vue export default eventbus 使用時 在 要使用的元件中 import 引入 eventbus.js 使用 emit 傳遞自定義方法和引數 就和 子元件傳...
vue變數傳值 Vue 元件之間傳值
一 父元件向子元件傳遞資料 在 vue 中，可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分，logo 是在 data 中定義的變數。如果需要從父元件獲取 logo 的值，就需要使用 props logo 在 props 中新增了元素之後，就不需要在...