vue父元件呼叫子元件,為子元件傳值,prop用法
1.父元件呼叫子元件
子元件children.vue程式碼如下:
<template>
<div>我是子元件</div>
</template>
父元件parent.vue程式碼如下:
<template>
<div>
<myChild></myChild>
</div>
</template>
<script>
import myChild from './child'; //第一步匯入子元件
export default {
name: 'parent',
components: {
myChild
}, //第二步註冊子元件
data() {
return {
}
}
}
</script>
此時在子元件中的內容會顯示在元件中,總結:父元件呼叫子元件
(1)在父元件中通過import匯入子元件。
(2)在父元件中使用components:{}註冊子元件。
2.父元件向子元件傳值
在子元件中,寫入一個動態資料message,然後通過props把資料匯出去,為外部父元件呼叫提供一個介面:
子元件程式碼如下:
<template>
<div>
我是子元件,顯示來自父元件的訊息{{message}}
</div>
</template>
<script>
export default {
props:["message"],
data() {
return {
}
}
}
</script>
在父元件中給message賦值:
<template>
<div>
<myChild :message="mymsg"></myChild>
</div>
</template>
<script>
import myChild from './child';
export default {
name: 'parent',
components: {
myChild
},
data() {
return {
mymsg: '向子元件傳送訊息:Happy'
}
}
}
</script>
在父元件中,在子元件上為:message賦值。
總結,父元件給子元件傳值:子元件中要通過props把變數匯出來,然後在父元件中使用該變數,為該變數賦值。
注:如果父元件傳值為一個靜態的值,也需要使用v-bind來告訴vue,v-bind簡寫為":"
例如:
<myChild v-bind:message="123"></myChild>
簡寫為:
<myChild :message="123"></myChild>
3.為子元件重新命名
在父元件中為子元件重新命名,可以在components中為子元件重新命名,格式如下:
<template>
<div>
<my-child-newname></my-child-newname>
</div>
</template>
<script>
import myChild from './child';
export default {
name: 'parent',
components: {
'my-child-newname':myChild
},
data() {
return {
}
}
}
</script>
4.props用法
props通常是以字串陣列的形式列出,例如:
props:["name","age","color","job","adress"],
如果希望每個字串都有指定值型別,可以為它定義屬性:
props:{
name:String,
age:Number,
color:Boolean,
job:Array,
adress:Object
},
當父元件賦值型別不對時,瀏覽器控制檯會提示錯誤資訊。
5.讓一個物件的屬性作為prop傳入
傳入一個物件的所有屬性,如果想讓一個物件的屬性作為prop傳入:
子元件程式碼如下:
<template>
<div>我是子元件,顯示來自父元件的訊息{{id}}{{title}}</div>
</template>
<script>
export default {
props: ["id","title"],
data() {
return {};
}
};
</script>
父元件中定義一個物件post,它有兩個屬性,id和title,父元件程式碼如下:
<template>
<div>
<blog-post v-bind="post"></blog-post>
</div>
</template>
<script>
import myChild from "./child";
export default {
components: {
"blog-post": myChild
},
data() {
return {
post: {
id: 1,
title: "My Journey with Vue"
}
};
}
};
</script>
註釋:
<blog-post v-bind="post"></blog-post>
等價於
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
6.傳遞靜態或動態prop
傳入一個靜態的值:
<blog-post title="我是標題"></blog-post>
動態賦值:
<!-- 動態賦予一個變數的值 -->
<blog-post :childtitle="post.title"></blog-post>
<!-- 動態賦予一個複雜的表示式的值 -->
<blog-post :childtitle="post.title+'hello'+post.id"></blog-post>
任何型別的值都可以傳給prop,
<!-- 傳入一個數字 -->
<blog-post :childtitle1="123"></blog-post>
<!-- 傳入一個布林值 -->
<blog-post :childtitle2="false"></blog-post>
<!-- 傳入一個數組 -->
<blog-post :childtitle3="[1,2,3,4,5]"></blog-post>
<!-- 傳入一個物件 -->
<blog-post :childtitle4="{name:'lisa',age:12}"></blog-post>
7.單向資料流
所有的prop都使得其父子prop之間形成了一個單向下繫結:父級prop的更新會向下流動到子元件中,但是反過來則不行,這樣會防止從子元件意外改變父元件的狀態。
每次父級元件發生更新時,子元件中所有的prop都將會重新整理為最新的值,這意味著你不應該在一個子元件內部改變prop,如果這樣會在瀏覽器控制檯報錯。
這裡有兩中常見的試圖改變一個prop的情形:
(1)這個prop用來傳遞一個初始值,這個子元件接下來希望將其作為一個本地的prop資料來使用,在這種情況下,最好定義一個本地的data屬性並將這個prop用作其初始值。
在子元件中,有兩個變數,childtitle和mycount,把childtitle匯出從父元件獲取值,然後傳給mycount:
<template>
<div>
title資料:{{childtitle}}
<br>
count資料:{{mycount}}
</div>
</template>
<script>
export default {
props: ["childtitle"],
data() {
return {
mycount: this.childtitle
};
}
};
</script>
父級元件程式碼中,給childtitle賦值,此時,當點選按鈕時,childtitle的值會變化:
<template>
<div>
<span @click="myClick">點選</span>
<blog-post :childtitle="parcount"></blog-post>
</div>
</template>
<script>
import myChild from "./child";
export default {
components: {
"blog-post": myChild
},
data() {
return {
parcount: 0
};
},
methods: {
myClick() {
this.parcount++;
}
}
};
</script>
以上會出現一個問題,當點選按鈕時childtitle的值會跟著變化,但是子元件中mycount的值不會變化,這時mycoun需要使用計算屬性computed才能使值跟著變化,子元件中的程式碼更改如下:
<template>
<div>
title資料:{{childtitle}}
<br>
count資料:{{mycount}}
</div>
</template>
<script>
export default {
props: ["childtitle"],
data() {
return {};
},
computed: {
mycount: function() {
return this.childtitle;
}
}
};
</script>
8.prop驗證
我們可以為元件的prop指定驗證要求,例如你知道的這些型別,如果有一個需求沒有被滿足,則Vue會在瀏覽器控制檯發出警告。
為了定製prop的驗證方式,你可以為props中的值提供一個帶有驗證需求的物件,而不是一個字串陣列。例如:
props: {
// 指定基礎型別檢查
proA: Number,
// 可以設定多個型別,該值符合其中一個即可
proB: [String, Number],
// 如果該變數必須存在,必填,可以設定required為true,可以通過type設定該值得型別
proC: {
type: Number,
required: true
},
// 可以使用default設定預設的值
proD: {
type: Number,
default: 100
},
// 可以設定帶有預設值得物件
proE: {
type: Object,
//注:物件或陣列預設值必須從一個工廠函式獲取
default: function() {
return {
meseage: "hello"
};
}
},
// 可以自定義驗證函式
proF: {
validator: function(value) {
//這個值必須匹配下列字串中的一個
return ["success", "warning", "danger"].indexOf(value) !== -1;
}
}
},
當父級元件傳過來的值不符合條件,驗證失敗時,vue控制檯會發生警告。
注:prop會在一個元件例項建立之前進行驗證,所以例項的屬性(如data,computed)在default或validator函式中是不可用的。
type型別包括:
String
Number
Boolean
Array
Object
Date
Function
Symbol
注:type還可以是一個自定義的建構函式,並且通過instanceof來進行檢查確認。
例如如下建構函式:
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
可以使用以下方式來驗證prop的值是否通過new Person建立的。
Vue.component('blog-post', {
props: {
author: Person
}
})