機(jī)械建設(shè)網(wǎng)站制作建站之星官方網(wǎng)站
何為組件間傳值
在Vue3之組件文章中，我們學(xué)會(huì)了定義使用組件，但是我們似乎還缺少什么將組件之間聯(lián)系起來(lái)，說到組件之間的聯(lián)系就不得不提組件間的傳值，而組件間的傳值其實(shí)也不難理解，就是如何在子組件中接收到父組件傳遞到值。本文就介紹如何將父組件中的值傳遞到子組件中。
實(shí)例解析
組件間傳值分為靜態(tài)傳參和動(dòng)態(tài)傳參。動(dòng)態(tài)傳參顧名思義就是傳遞的參數(shù)可以動(dòng)態(tài)變化。靜態(tài)傳參是直接傳參數(shù)，傳的是固定字符串。另外，組件間還可以傳遞多個(gè)參數(shù)并且對(duì)傳遞的參數(shù)做校驗(yàn)。
1.靜態(tài)傳參
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>組件間傳值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({template: `<div><test content = "hello world"/></div>` });// 定義一個(gè)test組件app.component('test',{props: ['content'],template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>
如上例所示，我們定義了一個(gè)test組件用于演示，在父組件中調(diào)用子組件test，并從父組件中傳遞一個(gè)content為
hello world的內(nèi)容給子組件，在父組件中傳遞的時(shí)候直接使用類似于定義div屬性的方式：
<test content = "hello world"/>
子組件接收的時(shí)候，需要加一個(gè)props屬性去接收,然后再顯示出來(lái)：
props: ['content'],
template: `<div>{{content}}</div>`
這時(shí)我們?cè)跒g覽器中運(yùn)行html代碼就可以得到：
2.動(dòng)態(tài)傳參
使用動(dòng)態(tài)傳參傳遞代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>組件間傳值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {num:456}},template: `<div><test v-bind:content = "num"/></div>` });// 定義一個(gè)test組件app.component('test',{props: ['content'],template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>
如上面的代碼所示，我們定義的組件和靜態(tài)傳參數(shù)時(shí)定義的一樣，不同的是傳遞值的父組件，在父組件中，我們需要將需要改變的值定義到data()方法中，再通過v-bind的方式綁定數(shù)據(jù)到子組件中，代碼如下：
const app = Vue.createApp({data() {return {num:456}},template: `<div><test v-bind:content = "num"/></div>` });
<test v-bind:content = "num"/> 也可以簡(jiǎn)寫成 <test :content = "num"/>
3 組件間傳遞多個(gè)參數(shù)
從上面的例子中我們知道要在組件間傳遞值，需要定義一個(gè)屬性，填充數(shù)據(jù)，然后在對(duì)應(yīng)的組件中使用一個(gè)props去接收，那當(dāng)我們需要在組件間傳遞多個(gè)參數(shù)時(shí)，我們需要定義多個(gè)參數(shù)嗎？我們先看下面的代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>組件間傳值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {num:456,a:123,b:456,c:789}},template: `<div><test v-bind:content = "num" :a="a" :b="b" :c="c"/></div>` });// 定義一個(gè)test組件app.component('test',{props: ['content','a','b','c'],template: `<div>{{content}}---{{a}}---{}---{{c}}</div>`});const vm = app.mount('#root');
</script>
</html>
我們假設(shè)要傳遞四個(gè)參數(shù)，num,a,b,c到自組件，上面的代碼中,我們可以看到要定義四個(gè)屬性和值，寫起來(lái)特別的麻煩，因?yàn)槟壳熬退膫€(gè)參數(shù)，如果要是需要傳十幾個(gè)參數(shù)時(shí)，再這么寫就很繁瑣了，而且容易寫錯(cuò)。雖然可以運(yùn)行，上面的代碼運(yùn)行結(jié)果：
我們傳遞多個(gè)值的正確方法應(yīng)該是傳遞一個(gè)對(duì)象過去，這個(gè)對(duì)象中保存了我們想要傳遞的所有參數(shù)，這樣的話會(huì)方便很多，如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>組件間傳值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {params:{num:456,a:123,b:456,c:789}}},template: `<div><test v-bind = "params"/></div>` });// 定義一個(gè)test組件app.component('test',{props: ['num','a','b','c'],template: `<div>{{num}}---{{a}}---{}---{{c}}</div>`});const vm = app.mount('#root');
</script>
</html>
傳遞多個(gè)參數(shù)時(shí)可以在data()方法中定義一個(gè)對(duì)象，如本例中的，params。
data() {return {params:{num:456,a:123,b:456,c:789}}}
傳遞的時(shí)候通過
v-bind = "params"傳遞，使用的時(shí)候也是通過props接收，想要啥數(shù)據(jù)接收啥數(shù)據(jù)
app.component('test',{props: ['num','a','b','c'],template: `<div>{{num}}---{{a}}---{}---{{c}}</div>`});
這就實(shí)現(xiàn)了組件之間傳遞多個(gè)值
4.組件間傳值校驗(yàn)
有時(shí)候我們需要對(duì)傳遞過來(lái)的值進(jìn)行校驗(yàn)，看傳遞過來(lái)的值是不是我們想要的類型，或者是傳遞過來(lái)的值是否符合我們的條件，這些校驗(yàn)工作需要在客戶端實(shí)現(xiàn)。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>組件間傳值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {value:123}},template: `<div><test :content = "value"/></div>` });// 定義一個(gè)test組件app.component('test',{props: {content:String},template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>
父組件傳遞值的時(shí)候還是和以前一樣，只是在接收值的時(shí)候，我們使用的方式是：props{}的方式
app.component('test',{props: {content:String},template: `<div>{{content}}</div>`});
這里的意思是我們希望接收到的數(shù)據(jù)是string類型的，假設(shè)父組件給我傳遞的類型不是string類型的，如上面的例子，就會(huì)報(bào)警告，我們運(yùn)行代碼并且打開網(wǎng)頁(yè)的檢查選項(xiàng)可以看到如下的結(jié)果：
我們發(fā)現(xiàn)雖然也能顯示傳遞過來(lái)的值，但是會(huì)報(bào)警告，假設(shè)我們傳遞過來(lái)的值類型是正確的，那么就不會(huì)報(bào)警，我們可以把父組件中的值改成string類型的。這時(shí)候我們會(huì)發(fā)現(xiàn)警告消失了。
注：可以校驗(yàn)的值有 String，Boolena,Array,Object,Functon,Symbol
在接收值的時(shí)候，我們還可以如下校驗(yàn)我們接收的值：
// 定義一個(gè)test組件app.component('test',{props: {content:{type:String,required:true}},template: `<div>{{content}}</div>`});
接收的時(shí)候?qū)ontent進(jìn)行多方面驗(yàn)證，比如是否是必須傳遞的，加required關(guān)鍵字，這時(shí)如果傳遞過來(lái)的數(shù)據(jù)不符合要求，就會(huì)報(bào)警告，比如我們要求傳String 類型的結(jié)果卻傳來(lái)int,這時(shí)結(jié)果就是：
我們也可以加一個(gè)default項(xiàng)假如父組件不傳遞值的話默認(rèn)顯示的值：
// 定義一個(gè)test組件app.component('test',{props: {content:{type:String,default:"9527"}},template: `<div>{{content}}</div>`});
父組件不傳遞值的話就會(huì)顯示設(shè)置的默認(rèn)值：9527
假如我們想要對(duì)傳遞的值本身做下驗(yàn)證，比如規(guī)定傳遞的值必須小于某個(gè)值應(yīng)該怎么做呢，這就需要用到validator屬性了，具體如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vue@next"></script><title>組件間傳值</title>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {value:300}},template: `<div><test :content = "value"/></div>` });// 定義一個(gè)test組件app.component('test',{props: {content:{type:Number,validator:function(value){return value < 200;}}},template: `<div>{{content}}</div>`});const vm = app.mount('#root');
</script>
</html>
上面的例子中我們接收值的時(shí)候做了驗(yàn)證，接收的值必須小于200
props: {content:{type:Number,validator:function(value){return value < 200;}}}
如果我們傳一個(gè)大于200的值，則會(huì)校驗(yàn)失敗，然后報(bào)警告
總結(jié)
本文我們學(xué)習(xí)了組件之間的傳參分為動(dòng)態(tài)傳參和靜態(tài)傳參以及傳遞多個(gè)參數(shù)和對(duì)傳遞的參數(shù)做驗(yàn)證，組件間的傳參可以方便我們?cè)诟附M件和子組件間通信，在提高組件的復(fù)用性的同時(shí)也讓組件間可以很好的結(jié)合起來(lái)。建議讀者多做練習(xí)，熟練掌握。