前臺傳參是 Vue.js 中非常重要的一個部分，它能夠幫助我們管理數據，修改數據并且更新數據。下面我們來詳細了解一下 Vue.js 中前臺傳參的相關內容。

Vue.js 前臺傳參的方式有很多，常見的有 props 和 $attrs、$listeners。其中 props 是父組件向子組件傳遞數據的方式，它在組件中注冊，可以定義傳遞數據的類型、默認值、校驗等。比如下面我們定義了一個名為 message 的 prop，類型為 String，傳遞默認值為 hello，校驗函數要求傳遞的 message 值必須是非空字符串：

Vue.component('my-component', {
props: {
message: {
type: String,
default: 'hello',
validator: function (value) {
return value !== ''
}
}
},
template: '
{{ message }}
'
})

子組件用 props 接收父組件傳遞的值，使用時直接通過屬性的形式獲取。下面是子組件中的代碼片段：

Vue.component('my-component', {
props: {
message: String
},
template: '
{{ message }}
'
})

子組件中使用時需要在組件標簽上添加屬性來傳遞參數，比如下面我們將 message 的值傳遞給子組件：

除了 props，Vue.js 還提供了 $attrs 和 $listeners。

$attrs 是沒有被父組件 prop 顯式聲明的特性綁定的對象，比如下面的代碼中，除了 title 以外的所有特性都被 $attrs 對象包含：

Vue.component('my-component', {
template: '
Title: {{ title }}
',
props: ['title']
})

Vue.component('my-component', {
template: '
Title: {{ title }}
ID: {{ $attrs.id }}
Class:{{ $attrs.class }}
',
props: ['title']
})

這樣子組件中就可以獲取到父組件傳遞的所有特性了。

$listeners 是一個對象，包含了父組件監聽的所有原生事件，可以通過 v-on="$listeners" 將所有事件綁定到子組件的根元素上。在子組件中可以通過 $emit 主動觸發父組件已綁定的方法，比如下面的代碼中，當子組件點擊 div 元素時，會觸發父組件 on-click 方法：

// 父組件模板
// 父組件實例
new Vue({
el: '#app',
methods: {
handleClick: function (event) {
console.log(event)
}
}
})
// 子組件模板
Click me!

上述就是 Vue.js 前臺傳參的三種方式，不同的場景以及需求選擇不同的傳參方式可以使代碼更加清晰易懂，便于維護。