Vue.js 中非常重要的一個功能——props！它是一種讓不同元件之間傳遞資料的方法。
讓我們用生活中的例子來理解「props」。可以把它想像成是你和朋友之間傳遞訊息的方式。當你想告訴朋友一個重要的消息時，你會將這個消息傳遞給他們，然後他們就能知道發生了什麼事情。
在 Vue.js 中，props 的作用類似於這種訊息傳遞的概念。它允許在不同的 Vue 元件之間共享資料。
範例如下：
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Prop Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child-component :message="parentMessage"></child-component>
</div>
<script src="main.js"></script>
</body>
</html>
Js:
Vue.component('child-component', {
props: ['message'],
template: `
<div>
<h2>子元件</h2>
<p>{{ message }}</p>
</div>
`
});
new Vue({
el: '#app',
data() {
return {
parentMessage: '這是父元件的訊息！'
};
}
});
呈現畫面:
在這個例子中，一開始在 HTML 文件中引入了 Vue.js 庫，然後創建了一個根元素 <div id="app">，同時在這裡使用了一個叫做 child-component 的子元件。
在 JavaScript 文件中，我們先用 Vue.component 定義了一個名為 child-component 的子元件，同時定義了一個名為 message 的 props。在模板中使用了這個 props 來顯示消息。
接下來，創建了一個新的 Vue 實例，並將其掛載到了根元素 #app 上，同時定義了一個名為 parentMessage 的數據屬性。
這樣打開 HTML 文件時，會看到在子元件中成功顯示了父元件傳遞的消息！
iThome鐵人賽
看影片追技術