vue 實現爺孫元件的資料通訊
阿新 • • 發佈:2022-04-21
$attrs的使用:
-
在爺元件(index.vue)中,類似props傳值,將需要傳遞的值繫結在父元件上。
-
在父元件中,也是類似props傳值,但是這裡傳遞的就不是值了,而是$attrs。
-
在孫元件中,接收props,這樣就可以在孫元件中使用這個資料了。
(需要注意的是父元件中不需要接收props,只要在孫元件中接收就可以。)
//index.vue: <Father :homeInfo="homeInfo"/> //Father.vue: <Son v-bind="$attrs"/> //son.vue: <template> <div class="home"> {{homeInfo.name}}</div> </template> <script> export default { name: "Son", data() { return {}; }, props: { homeInfo: { default: Object, default: () => {}, }, }, }; </script>
$listeners的使用:
-
在爺元件(index.vue)中,繫結事件。
-
在父元件中,也是類似繫結事件,但是這裡繫結的不是具體的事件,而是
v-on="$listeners"
-
在孫元件中,需要的時候觸發(
$emit
)這個事件即可。
//index.vue: <Father :homeInfo="homeInfo" @update="update"/> //Father.vue: <Son v-bind="$attrs" v-on="$listeners"/> //son.vue: <template> <div class="home" @click="update"> {{homeInfo.name}} </div> </template> <script> exportdefault { name: "Son", data() { return {}; }, props: { homeInfo: { default: Object, default: () => {}, }, }, methods: { update() { const newHome = { name: 'new' } this.$emit("update", newHome) } } }; </script>