Vue中的attrs和listener是組件的兩個(gè)屬性，它們用來在組件中監(jiān)聽和處理由父組件傳遞來的數(shù)據(jù)。

下面是一個(gè)簡單的使用attrs和listener的示例：

Vue.component('my-component', {
props: ['text'],
template: '<div>{{ text }}</div>',
attrs: ['data-test'],
listeners: ['click'],
mounted() {
console.log(this.$attrs['data-test']); // 輸出 "hello world"
}
});
new Vue({
el: '#app',
template: '<my-component text="Hello, World!" data-test="hello world" @click="handleClick"></my-component>',
methods: {
handleClick() {
console.log('clicked');
}
}
});

在上面的代碼中，我們創(chuàng)建了一個(gè)名為my-component的Vue組件，并定義了text作為組件的props來接收父組件傳遞的值。同時(shí)，我們還定義了attrs和listeners來指定可以向子組件傳遞的屬性和事件。

在父組件中，我們使用text和data-test屬性來向子組件傳遞數(shù)據(jù)，并通過@click監(jiān)聽my-component組件的點(diǎn)擊事件。在子組件中，我們使用this.$attrs來獲取傳遞過來的屬性，并使用mounted鉤子來將data-test屬性輸出到控制臺。

總的來說，attrs和listeners是Vue組件中非常有用的兩個(gè)屬性，它們可以用于傳遞和處理父組件傳遞過來的數(shù)據(jù)，同時(shí)也可以幫助我們更好地封裝和組織Vue組件的邏輯。