溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關props如何在Vue中使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
props屬性是父子組件之間的通信橋梁。何為父子組件？從子組件的觀點來看，他的上一級實例或組件即為他的父組件。我們知道，處于安全考慮，組件模板里我們無法直接使用父組件的data數據，使用props這個屬性可以將父組件的數據傳給子組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props的測試</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
<Child message="父組件的message,我把他的內容重新定義了，但是父組件不會發生改變哦，因為沒有綁定，哈哈！！"></Child>
<hr />
<input v-model="message"/>
<Child :message='message'></Child>
</div>
<script>
Vue.component('Child',{
props: ['message'],
template: '<span>{{ message }}</span>'
});
var vm = new Vue({
el: '#props',
data: {
message: 'prop的測試'
}
});
</script>
</body>
</html>代碼效果圖
在子組件中對父組件的數據進行處理。父組件的數據通過props傳入子組件以后，在子組件中也可對數據進行相關處理，包括計算屬性、data屬性等。這樣當子組件需要對數據進行處理時，避免了直接在父組件中對數據進行操作，而且由于props數據流單向性，在子組件中更改數據時，不會對父組件的數據產生影響。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props的測試</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
<input v-model="message"/>
<Child :message='message'></Child>
</div>
<script>
Vue.component('Child',{
props: ['message','todos'],
template: '<span>{{ test }}</span>',
computed: {
test: function(){
return this.message.trim().toUpperCase();
}}
});
var vm = new Vue({
el: '#props',
data: {
message: 'prop的測試'
}
});
</script>
</body>
</html>代碼效果圖
代碼效果圖
prop的驗證
我們可以為組件的 prop 指定驗證規則。如果傳入的數據不符合要求，Vue 會發出警告。這對于開發給他人使用的組件非常有用。
要指定驗證規則，需要用對象的形式來定義 prop，而不能用字符串數組
Vue.component('example',{
props: {
propA: String,
propB: [Number,String]
}
});Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。
以上就是props如何在Vue中使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
