VUE子元件向父元件的資料傳遞

我們知道，父元件使用 prop 傳遞資料給子元件。但子元件怎麼跟父元件通訊呢？這個時候 vue 的自定義事件系統就派得上用場了。

使用繫結自定義事件v-on

每個 vue 例項都實現了事件介面，即：

使用 $on(eventname) 監聽事件

使用 $emit(eventname) 觸發事件

vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們的執行起來類似，但是 $on 和 $emit 並不是addeventlistener 和 dispatchevent 的別名。

另外，父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

不能用 $on 偵聽子元件釋放的事件，而必須在模板裡直接用 v-on 繫結，參見下面的例子。

//定義子元件

var child = }`,
data()
},methods:
}}

//根元件

var vm = new vue(,
components: ,
methods: 
}})//html

使用插槽分發內容

注意兩點：

元件不知道它會收到什麼內容。這是由使用的父元件決定的。

元件很可能有它自己的模板。

為了讓元件可以組合，我們需要一種方式來混合父元件的內容與子元件自己的模板。這個過程被稱為內容分發 (即 angular 使用者熟知的「transclusion」)。vue.js 實現了乙個內容分發 api，參照了當前 web components 規範草案，使用特殊的元素作為原始內容的插槽。

//slot插槽使其可以在html中傳入資料，也可以在其中傳入預設內容

var child = 
var vm = new vue(
})html
hello

有名slot

//slot插槽使其可以在html中傳入資料，也可以在其中傳入預設內容
var child = 
var vm = new vue(
})html
頭部內容
22222
底部內容
非父子元件
有時候，非父子關係的兩個元件之間也需要通訊。在簡單的場景下，可以使用乙個空的 vue 例項作為事件匯流排：
var bus = new vue()
template: '新增
', methods: }}
template: '}
', data() 
},created() )}} 
var vm = new vue (
})模態框例項
登入註冊
登入

靜態路由

不需要複雜的路由

首先需要

npm i -s vue-router 安裝router庫
var newscomponent = 
var shopcomponent = 
var notfoundcomponent = 
var routes = [,,
,]
var router = new vuerouter()
// router
// })
router
})

動態路由

var goods = )}},
data() 
}

VUE子元件向父元件的資料傳遞

vue子元件向父元件傳遞資料

父元件向子元件傳遞資料 14 父元件向子元件通訊

vue父元件向子元件傳遞資料prop

VUE子元件向父元件的資料傳遞

vue子元件向父元件傳遞資料

父元件向子元件傳遞資料 14 父元件向子元件通訊

vue父元件向子元件傳遞資料prop

相關推薦