Vue元件子元件向父元件傳遞資料以及路由

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

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

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() }}
var router = new vuerouter(
]});
var vm = new vue(,
created() )
}});

Vue元件子元件向父元件傳遞資料以及路由

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

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

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

Vue元件 子元件向父元件傳遞資料以及路由

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

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

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

相關推薦

Vue元件子元件向父元件傳遞資料以及路由

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