之前看了一篇關於Vue開發技巧的文章,其中提到了在寫高級組件時,通過v-bind="$props"將props一次性向下傳遞。這種向下傳遞的方式我之前沒有用過,便看了下官網的介紹,並補充了一些相關API用法,在這裏記錄一下,方便自己以後查看。先進行相關的屬性介紹,代碼在後面。
使用介紹:
v-bind="$props": 可以將父組件的所有props下發給它的子組件,子組件需要在其props:{} 中定義要接受的props。
vm.$props: 當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。
官網介紹: https://cn.vuejs.org/v2/api/#vm-props
v-bind="$attrs": 將調用組件時的組件標籤上綁定的非props的特性(class和style除外)向下傳遞。在子組件中應當添加inheritAttrs: false(避免父作用域的不被認作props的特性綁定應用在子組件的根元素上)。
vm.$attrs
:包含了父作用域中不作爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時,這裏會包含所有父作用域的綁定 (class 和 style 除外),並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。
官網介紹: https://cn.vuejs.org/v2/api/#vm-attrs
https://cn.vuejs.org/v2/api/#inheritAttrs
v-on="將父組件標籤上的自定義事件向下傳遞其子組件可以直接通過emit(eventName)的方式調用。
vm.$listeners
: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。
相關代碼
index.vue頁面
<template>
<div>
<h1>props、屬性、事件傳遞</h1>
<app-parent test="123" :name="name" :age="age" v-on:start1="say1" @start2="say2"></app-parent>
</div>
</template>
<script>
import AppParent from './parent.vue';
export default {
data() {
return {
name: '傳給父組件的值',
age: '18'
};
},
components: {
AppParent
},
methods: {
say1() {
console.log('第一個。。。。。');
},
say2() {
console.log('第二個。。。。。');
}
}
}
</script>
parent.vue組件
<template>
<div>
<h3>父組件</h3>
<div>組件名上綁定的非props特性($attrs): {{$attrs}}</div>
<app-child v-on="$listeners" v-bind="$props"></app-child>
</div>
</template>
<script>
import AppChild from './child.vue';
export default {
data() {
return {
};
},
inheritAttrs: false,
props: ['name', 'age'],
components: {
AppChild
},
mounted() {
this.$emit('start1');
}
}
</script>
child.vue組件
<template>
<div>
<h3>子組件</h3>
<div>父組件傳遞過來的名稱: {{name}}</div>
<div>父組件傳遞過來的年齡: {{age}}</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
props: ['name', 'age'],
components: {},
created() {
},
mounted() {
this.$emit('start2');
},
}
</script>
效果圖:
以上就是我對這些API的理解,如果有什麼不對的地方歡迎大家指出,謝謝。
參考資料:
7個有用的Vue開發技巧: https://juejin.im/post/5ce3b519f265da1bb31c0d5f#heading-4