溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在Vue.js中使用props傳遞數據，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
基本用法
通常父組件的模板中包含子組件，父組件要正向地向子組件傳遞數據或參數，子組件接收到后根據參數的不同來渲染不同的內容或執行操作。這個正向傳遞數據的過程就是通過props來實現的。
在組件中，使用選項props來聲明需要從父級接收的數據，props的值可以是兩種，一種是字符串數組，一種是對象。
示例：構造一個數組，接收一個來自父組件的message，并把它再組件模板中渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>props</title>
</head>
<body>
<div id="myApp">
<my-component message="來自父組件的數據"></my-component>
</div>
<script>
Vue.component('my-component',{
props: ['message'],
template: '<div>{{message}}</div>'
});
var myApp = new Vue({
el: '#myApp'
});
</script>
</body>
</html>props中聲明的數據與組件函數return的數據主要區別是：**props的數據來自父級，而data中的數據是組件自己的數據，作用域是組件本身。**這兩種數據都可以在模板template及計算屬性computed和方法methods中使用。
上例的數據message就是通過props從父級傳遞過來的，在組件的字的那個一標簽上直接寫該props的名稱，如果要傳遞多個數據，在props數組中添加項即可。
注意：由于HTML特性不區分大小寫，當使用DOM模板時，駝峰命名的props名稱要轉為短橫分割命名，例如：
<div id="app">
<my-component warning-text="提示信息"></my-component>
</div>
<script>
//如果使用字符串模板，可以忽略這些限制
Vue.component('my-component',{
props: ['warningText'],
template: '<div>{{warningText}}</div>'
});
var app = new Vue({
el: '#app'
});
</script>有時候，傳遞的數據并不是直接寫死的，而是來自父級的動態數據，這時候可以使用指令v-bing來動態綁定props的值，當父組件的數據變化時，也會傳遞給子組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>動態綁定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
</div>
<script>
Vue.component('my-component',{
props: ['message'],
template: '<div>{{message}}</div>'
});
var app = new Vue({
el: '#app',
data: {
parentMessage: ''
}
});
</script>
</body>
</html>
以上就是怎么在Vue.js中使用props傳遞數據，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
