Vue子組件與父組件詳細(xì)解析
一、父組件和子組件
我們經(jīng)常分不清什么是父組件，什么是子組件。現(xiàn)在來簡單總結(jié)下：我們將某段代碼封裝成一個(gè)組件，而這個(gè)組件又在另一個(gè)組件中引入，而引入該封裝的組件的文件叫做父組件，被引入的組件叫做子組件。
具體代碼如下：
<div id="app">
<component2></component2>
</div>
<script>
// 全局注冊(cè)
Vue.component("component1", {
template: `
<div>
<h2>hello</h2>
</div>
`
})
const app = new Vue({
el: "#app",
data: {
message: "hello"
},
components: {
// 局部注冊(cè)
"component2": {
template: `
<div>
<component1></component1>
<h2>world</h2>
</div>
`,
}
}
})
</script>
- 1.全局注冊(cè)組件
component1 - 2.局部注冊(cè)組件
component2，component2中又引用了組件component1
最后我們?cè)趆tml中使用組件component-2，
模板代碼就是：
<div> <component-1></component-1> <h2>world</h2> </div>
又因?yàn)榻M件component1中也有模板，所以程序會(huì)自動(dòng)進(jìn)行解析，最后component-2的html代碼為
<div>
<div>
<h2>hello</h2>
</div>
<h2>world</h2>
</div>
所以我們?cè)跒g覽器上看到的效果應(yīng)該是：
hello
world
結(jié)果：
component1是子組件，component2是父組件
二、模板分離寫法
上面我們創(chuàng)建組件的時(shí)候，都在組件中寫了模板template，但是在編譯器里這樣寫，不僅沒有代碼提示，而且換行也不對(duì)齊，寫起來很麻煩，所以這里介紹模板分離寫法
1、template標(biāo)簽
我們將原來在組件里寫的template模板抽離出來，放在html中，使用template標(biāo)簽，并且給他附上id屬性如下：
<template id="component2">
<div>
<component1></component1>
<h2>world</h2>
</div>
</template>
然后在組件中，將原來template標(biāo)簽的內(nèi)容換成id，這樣程序就會(huì)自動(dòng)去尋找對(duì)應(yīng)的id模板：
components: {
// 局部注冊(cè)
"component2": {
template: `#component2`,
}
}
推薦這種寫法
2、text/x-template
我們還有另一中寫法，跟上面差不多，上面我們用的template標(biāo)簽，此寫法只需將template中的內(nèi)容放到script標(biāo)簽中，并給與類型type=text/x-template，再給上一個(gè)id屬性即可，
如下：
<script type="text/x-template" id="component2">
<div>
<component1></component1>
<h2>world</h2>
</div>
</script>
三、父子組件通信-父傳子
當(dāng)我們創(chuàng)建了父組件和子組件，如果子組件也想獲取父組件上相同的數(shù)據(jù)，一種方法是像后臺(tái)發(fā)送接口獲取數(shù)據(jù)，但是這樣會(huì)給服務(wù)器造成壓力，所以我們有了第二種方法，通過props屬性來獲取父組件的數(shù)據(jù)
<div id="app">
<test1 :cmovies="movies"></test1>
</div>
<template id="test1">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ["海賊王", "海爾兄弟", "海王"]
},
components: {
"test1": {
template: `#test1`,
props: ['cmovies'],
data(){
return{}
},
}
}
})
</script>
這里我們將app實(shí)例定義為父組件，又定義了子組件test1，此時(shí)子組件test1想獲取父組件data中的數(shù)據(jù)來展示在頁面上，就需要寫入props屬性，這里綁定了變量cmovies，最后我們?cè)趆tml中使用子組件test1時(shí)，想傳入父組件data中的數(shù)據(jù)，就需要綁定屬性，:cmovies="movies"，cmovies是props中定義的變量，綁定的值是movies列表，所以上面的代碼<li v-for="item in cmovies">{{item}}</li>中的cmoviess的值其實(shí)是列表movies的數(shù)據(jù)，因?yàn)楦附M件已經(jīng)向子組件傳遞了值
最后網(wǎng)頁上就能顯示movies中的電影了
以上頁面上顯示的無序列表，我們是使用了子組件，數(shù)據(jù)是從父組件data中傳入到了子組件，子組件通過props與父組件綁定
1、Prop 類型
上面的例子我們把props定義成為了一個(gè)數(shù)組，用于接收來自父組件的數(shù)據(jù)。我們也可以使用對(duì)象作為替代，對(duì)象允許配置高級(jí)選項(xiàng)，如類型檢測、自定義驗(yàn)證和設(shè)置默認(rèn)值。
- type：可以是下列原生構(gòu)造函數(shù)中的一種：
String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構(gòu)造函數(shù)、或上述內(nèi)容組成的數(shù)組。會(huì)檢查一個(gè)prop是否是給定的類型，否則拋出警告。Prop類型的更多信息在此。 - default：
any為該prop指定一個(gè)默認(rèn)值。如果該prop沒有被傳入，則換做用這個(gè)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(shù)返回。 - required：
Boolean定義該prop是否是必填項(xiàng)。在非生產(chǎn)環(huán)境中，如果這個(gè)值為truthy且該prop沒有被傳入的，則一個(gè)控制臺(tái)警告將會(huì)被拋出。 - validator：
Function自定義驗(yàn)證函數(shù)會(huì)將該prop的值作為唯一的參數(shù)代入。在非生產(chǎn)環(huán)境下，如果該函數(shù)返回一個(gè) falsy 的值 (也就是驗(yàn)證失敗)，一個(gè)控制臺(tái)警告將會(huì)被拋出。你可以在這里查閱更多prop驗(yàn)證的相關(guān)信息。
示例：
// 簡單語法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 對(duì)象語法，提供驗(yàn)證
Vue.component('props-demo-advanced', {
props: {
// 檢測類型
height: Number,
// 檢測類型 + 其他驗(yàn)證
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
注意：當(dāng)我們?cè)谑褂?code>props時(shí)，如果我們使用駝峰命名法，比如cMovies，然后我們?cè)?code>HTML中綁定時(shí)如果也這么寫，程序是不識(shí)別的，我們需要轉(zhuǎn)成c-movies這種短橫線形式
四、父子組件通信子傳父
子傳父的場景，通常是子組件傳遞事件給父組件監(jiān)聽，告訴父組件用戶點(diǎn)擊了哪個(gè)按鈕，使用的函數(shù)是$emit
1、vm.$emit( eventName, […args] )
參數(shù)：
- eventName：事件名字
- args：不定長的數(shù)組
觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)。
示例：
<div id="app">
<test1 @item-click="cpnClick"></test1>
</div>
<template id="test1">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
cpnClick(item){
console.log("success", item)
}
},
components: {
// 局部注冊(cè)組件test1
"test1": {
data(){
return{
categories: [
{id: "aaa", name: "熱門推薦"},
{id: "bbb", name: "手機(jī)數(shù)碼"},
{id: "ccc", name: "家用電器"},
{id: "ddd", name: "食品飲料"},
]
}
},
methods: {
btnClick(item){
this.$emit("item-click", item)
}
},
template: `#test1`
}
}
})
</script>
以上代碼定義了test1子組件，并在methods中通過$emit傳遞了事件和額外的參數(shù)item，然后父組件通過@item-click="cpnClick"事件綁定，這樣父組件就能收到子組件的點(diǎn)擊事件，并且觸發(fā)自己的點(diǎn)擊事件，效果如下
我們可以看到控制臺(tái)打印的日志中含有子組件的categories的分類
五、父子組件通信-結(jié)合雙向綁定案例
下面這個(gè)案例結(jié)合了父傳子和子傳父，還有v-model，是個(gè)非常全面的案例
1、基本模板代碼
<div id="app">
<cpn :number1="num1" :number2="num2"></cpn>
</div>
<template id="cpn">
<div>
<h2>{{number1}}</h2>
<h2>{{number2}}</h2>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
num1: 0,
num2: 1,
},
components: {
// 定義子組件cpn
"cpn": {
template: `#cpn`,
props: {
number1: Number,
number2: Number,
}
}
},
})
</script>
代碼做了如下的事情
- 1.定義了子組件
cpn，又定義了2個(gè)屬性number1和number2用來接收父組件傳遞的數(shù)據(jù) - 2.在
html代碼中引用了子組件cpn，并將app實(shí)力中的num1和num2傳遞給子組件props中的屬性 - 3.最后我們?cè)陧撁嫔巷@示的數(shù)據(jù)
number1和number2其實(shí)就是data中的num1和num2
最后頁面展示的效果就是：
0
1
2、增加雙向綁定
在上面的模板基礎(chǔ)上，我們新增雙向綁定，新增2個(gè)input標(biāo)簽，并使用v-model與props中的屬性進(jìn)行綁定
<template id="cpn">
<div>
<h2>props:{{number1}}</h2>
<input type="text" v-model="number1">
<h2>props:{{number2}}</h2>
<input type="text" v-model="number2">
</div>
</template>
以上代碼就完成了雙向綁定，但是會(huì)有報(bào)錯(cuò)警告
當(dāng)我們?cè)谧咏M件中與props雙向綁定的時(shí)候，會(huì)出現(xiàn)警告，意思是不要使用props雙向綁定，建議使用data或者compused來雙向綁定，這里修改成與data綁定
<template id="cpn">
<div>
<h2>data:{{dnumber1}}</h2>
<input type="text" v-model="dnumber1">
<h2>data:{{dnumber2}}</h2>
<input type="text" v-model="dnumber2">
</div>
</template>
data(){
return{
dnumber1: this.number1,
dnumber2: this.number2,
}
},
當(dāng)我們與data進(jìn)行綁定以后，就不會(huì)出現(xiàn)報(bào)錯(cuò)了
3、反向綁定
接著上面的思路，我們希望input輸入值的時(shí)候，改變data中的同時(shí)，也同時(shí)改變父組件中num1和num2的值，這時(shí)就需要反向綁定通過子傳父，
下面是完整的代碼：
<div id="app">
<cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>
<template id="cpn">
<div>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<label>
<input type="text" :value="dnumber1" @input="num1Input">
</label>
<h2>props:{{number2}}</h2>
<h2>data:{{dnumber2}}</h2>
<label>
<input type="text" :value="dnumber2" @input="num2Input">
</label>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
num1: 0,
num2: 1,
},
methods: {
num1change(value){
this.num1 = parseInt(value)
},
num2change(value){
this.num2 = parseInt(value)
},
},
components: {
// 定義子組件cpn
"cpn": {
template: `#cpn`,
props: {
number1: Number,
number2: Number,
},
data(){
return{
dnumber1: this.number1,
dnumber2: this.number2,
}
},
methods: {
num1Input(event){
// 1.將input中的value賦值到dnumber中
this.dnumber1 = event.target.value
// 2.為了讓父組件可以修改值，需要發(fā)出一個(gè)事件
this.$emit("num1change", this.dnumber1)
},
num2Input(event){
// 1.將input中的value賦值到dnumber中
this.dnumber2 = event.target.value
// 2.為了讓父組件可以修改值，需要發(fā)出一個(gè)事件
this.$emit("num2change", this.dnumber2)
}
}
}
},
})
</script>
效果如下：
六、組件訪問父訪問子
當(dāng)我們父組件中需要使用子組件中的函數(shù)或者屬性值，我們可以使用$refs，它返回的類型是Object，先看如下代碼
<div id="app">
<cpn ref="aaa"></cpn>
<button @click="btnClick">按鈕</button>
</div>
<template id="cpn">
<div>
我是子組件
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
btnClick(){
console.log(this.$refs.aaa.name)
this.$refs.aaa.showMessage()
}
},
components: {
"cpn": {
template: `#cpn`,
data(){
return{
name: "我是子組件的name"
}
},
methods: {
showMessage(){
console.log("showMessage")
}
}
}
}
})
</script>
上述代碼干了如下幾件事情
- 1.創(chuàng)建了組件
cpn，組件中定義了一個(gè)方法showMessage和屬性name - 2.父組件中使用子組件
cpn，并綁定了一個(gè)屬性ref值為aaa，相當(dāng)于是唯一標(biāo)識(shí) - 3.父組件的方法
btnClick需要使用子組件中的方法和屬性，只需要this.$refs.aaa，這里的aaa就是上面綁定的子組件的屬性 - 4.最后使用
this.$refs.aaa.name就代表使用了子組件中的name屬性
到此這篇關(guān)于Vue子組件與父組件詳細(xì)解析的文章就介紹到這了,更多相關(guān)Vue子組件與父組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法
這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08
vue+express 構(gòu)建后臺(tái)管理系統(tǒng)的示例代碼
這篇文章主要介紹了vue+express 構(gòu)建后臺(tái)管理系統(tǒng)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章給大家介紹了vue3中form對(duì)象無法賦值的問題解決,有時(shí)候?qū)ο蟮闹邓阑钯x不上值,這時(shí)候可以看下賦值的對(duì)象變量名是否和頁面組件中的ref相同,文中給出了代碼示例供大家參考,需要的朋友可以參考下2024-01-01
Vue與.net?Core?接收List＜T＞泛型參數(shù)
這篇文章主要介紹了Vue與.net?Core?接收List＜T＞泛型參數(shù)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果
<Transition> 是一個(gè)內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無需注冊(cè),它可以將進(jìn)入和離開動(dòng)畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果,需要的朋友可以參考下2024-09-09
Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue-cli3 $ is not defined錯(cuò)誤問題及解決
這篇文章主要介紹了Vue-cli3 $ is not defined錯(cuò)誤問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07