vue組件Prop傳遞數據的實現示例

來源：懂視網責編：小采時間：2020-11-27 22:32:17

vue組件Prop傳遞數據的實現示例

vue組件Prop傳遞數據的實現示例:組件實例的作用域是孤立的。這意味著不能(也不應該)在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的props選項。 prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無

推薦度：

點擊下載本文 文檔為doc格式

導讀vue組件Prop傳遞數據的實現示例:組件實例的作用域是孤立的。這意味著不能(也不應該)在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的props選項。 prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無

組件實例的作用域是孤立的。這意味著不能(也不應該)在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的props選項。

prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態。

每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著你不應該在子組件內部改變 prop。

1、Prop靜態傳遞數據

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>

</head>
<body >
<div id="app">
 <!--靜態傳遞數據-->
 <my-component message="hello" name="劉二狗" age="18"></my-component>
</div>
</body>

<script>
 Vue.component('my-component',{
 //子組件使用父組件的數據 message name age
 props:['message','name','age'],
 //用data選項對數據進行處理
 data:function(){
 return{
 message1: this.message +'用data選項對數據進行處理'
 }
 },
 //用計算屬性選項對數據進行處理
 computed:{
 message2:function(){
 return this.message + '用計算屬性選項對數據進行處理'
 }
 },
 template:'<div>' +
 '<span>{{message1}}</span><br>'+
 '<span>{{message2}}</span><br>'+
 '<span>{{message}} {{name}}今年{{age}}了</span><br>'+
 '</div>'
 })
 new Vue({
 el:'#app'
 })
</script>
</html>

輸出結果：

2、Prop動態傳遞數據

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
 <input v-model="parentMsg"><br>
 <my-component :message="parentMsg"></my-component>
</div>
</body>

 <script>
 Vue.component('my-component',{
 props:['message'],
 data:function(){
 return{count:this.message+'劉三狗的嫉妒了'}
 },
 computed:{
 normalizedSize: function () {
 return this.message.trim().toLowerCase()
 }
 },
 template:'<div>' +
 '<span>{{message}}---{{normalizedSize}}</span><br>'+
 '<span>{{count}}</span>'+
 '</div>'
 })

 new Vue({
 el:'#app',
 data:{
 parentMsg:'哈哈哈'
 }
 })
</script>
</html>

輸出結果：

3、Prop驗證，我們可以為組件的 props 指定驗證規格。如果傳入的數據不符合規格，Vue 會發出警告。在前臺的控制器中可以看到警告信息。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
 <div id="app">
 <example :prop-d="message"></example>
 </div>
</body>

<script>
 Vue.component('example', {
 props: {
 // 基礎類型檢測 （`null` 意思是任何類型都可以）
 propA: Number,
 // 多種類型
 propB: [String, Number],
 // 必傳且是字符串
 propC: {
 type: String,
 required: true
 },
 // 數字，有默認值
 propD: {
 type: Number,
 default: 100
 },
 // 數組／對象的默認值應當由一個工廠函數返回
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 // 自定義驗證函數
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 },
 template:'<span>{{propD}}</span>'
 })

 new Vue({
 el:'#app',
 data:{
 message:'propD驗證只能傳入數字類型'
 }
 })
</script>
</html>

控制臺輸出的警告信息：