Vue子組件與父組件詳細解析
一、父組件和子組件
我們經常分不清什么是父組件，什么是子組件。現(xiàn)在來簡單總結下：我們將某段代碼封裝成一個組件，而這個組件又在另一個組件中引入，而引入該封裝的組件的文件叫做父組件，被引入的組件叫做子組件。
具體代碼如下：
<div id="app">
<component2></component2>
</div>
<script>
// 全局注冊
Vue.component("component1", {
template: `
<div>
<h2>hello</h2>
</div>
`
})
const app = new Vue({
el: "#app",
data: {
message: "hello"
},
components: {
// 局部注冊
"component2": {
template: `
<div>
<component1></component1>
<h2>world</h2>
</div>
`,
}
}
})
</script>
- 1.全局注冊組件
component1 - 2.局部注冊組件
component2，component2中又引用了組件component1
最后我們在html中使用組件component-2，
模板代碼就是：
<div> <component-1></component-1> <h2>world</h2> </div>
又因為組件component1中也有模板，所以程序會自動進行解析，最后component-2的html代碼為
<div>
<div>
<h2>hello</h2>
</div>
<h2>world</h2>
</div>
所以我們在瀏覽器上看到的效果應該是：
hello
world
結果：
component1是子組件，component2是父組件
二、模板分離寫法
上面我們創(chuàng)建組件的時候，都在組件中寫了模板template，但是在編譯器里這樣寫，不僅沒有代碼提示，而且換行也不對齊，寫起來很麻煩，所以這里介紹模板分離寫法
1、template標簽
我們將原來在組件里寫的template模板抽離出來，放在html中，使用template標簽，并且給他附上id屬性如下：
<template id="component2">
<div>
<component1></component1>
<h2>world</h2>
</div>
</template>
然后在組件中，將原來template標簽的內容換成id，這樣程序就會自動去尋找對應的id模板：
components: {
// 局部注冊
"component2": {
template: `#component2`,
}
}
推薦這種寫法
2、text/x-template
我們還有另一中寫法，跟上面差不多，上面我們用的template標簽，此寫法只需將template中的內容放到script標簽中，并給與類型type=text/x-template，再給上一個id屬性即可，
如下：
<script type="text/x-template" id="component2">
<div>
<component1></component1>
<h2>world</h2>
</div>
</script>
三、父子組件通信-父傳子
當我們創(chuàng)建了父組件和子組件，如果子組件也想獲取父組件上相同的數(shù)據(jù)，一種方法是像后臺發(fā)送接口獲取數(shù)據(jù)，但是這樣會給服務器造成壓力，所以我們有了第二種方法，通過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實例定義為父組件，又定義了子組件test1，此時子組件test1想獲取父組件data中的數(shù)據(jù)來展示在頁面上，就需要寫入props屬性，這里綁定了變量cmovies，最后我們在html中使用子組件test1時，想傳入父組件data中的數(shù)據(jù)，就需要綁定屬性，:cmovies="movies"，cmovies是props中定義的變量，綁定的值是movies列表，所以上面的代碼<li v-for="item in cmovies">{{item}}</li>中的cmoviess的值其實是列表movies的數(shù)據(jù)，因為父組件已經向子組件傳遞了值
最后網頁上就能顯示movies中的電影了
以上頁面上顯示的無序列表，我們是使用了子組件，數(shù)據(jù)是從父組件data中傳入到了子組件，子組件通過props與父組件綁定
1、Prop 類型
上面的例子我們把props定義成為了一個數(shù)組，用于接收來自父組件的數(shù)據(jù)。我們也可以使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。
- type：可以是下列原生構造函數(shù)中的一種：
String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構造函數(shù)、或上述內容組成的數(shù)組。會檢查一個prop是否是給定的類型，否則拋出警告。Prop類型的更多信息在此。 - default：
any為該prop指定一個默認值。如果該prop沒有被傳入，則換做用這個值。對象或數(shù)組的默認值必須從一個工廠函數(shù)返回。 - required：
Boolean定義該prop是否是必填項。在非生產環(huán)境中，如果這個值為truthy且該prop沒有被傳入的，則一個控制臺警告將會被拋出。 - validator：
Function自定義驗證函數(shù)會將該prop的值作為唯一的參數(shù)代入。在非生產環(huán)境下，如果該函數(shù)返回一個 falsy 的值 (也就是驗證失敗)，一個控制臺警告將會被拋出。你可以在這里查閱更多prop驗證的相關信息。
示例：
// 簡單語法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 對象語法，提供驗證
Vue.component('props-demo-advanced', {
props: {
// 檢測類型
height: Number,
// 檢測類型 + 其他驗證
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
注意：當我們在使用props時，如果我們使用駝峰命名法，比如cMovies，然后我們在HTML中綁定時如果也這么寫，程序是不識別的，我們需要轉成c-movies這種短橫線形式
四、父子組件通信子傳父
子傳父的場景，通常是子組件傳遞事件給父組件監(jiān)聽，告訴父組件用戶點擊了哪個按鈕，使用的函數(shù)是$emit
1、vm.$emit( eventName, […args] )
參數(shù)：
- eventName：事件名字
- args：不定長的數(shù)組
觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調。
示例：
<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: {
// 局部注冊組件test1
"test1": {
data(){
return{
categories: [
{id: "aaa", name: "熱門推薦"},
{id: "bbb", name: "手機數(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"事件綁定，這樣父組件就能收到子組件的點擊事件，并且觸發(fā)自己的點擊事件，效果如下
我們可以看到控制臺打印的日志中含有子組件的categories的分類
五、父子組件通信-結合雙向綁定案例
下面這個案例結合了父傳子和子傳父，還有v-model，是個非常全面的案例
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個屬性number1和number2用來接收父組件傳遞的數(shù)據(jù) - 2.在
html代碼中引用了子組件cpn，并將app實力中的num1和num2傳遞給子組件props中的屬性 - 3.最后我們在頁面上顯示的數(shù)據(jù)
number1和number2其實就是data中的num1和num2
最后頁面展示的效果就是：
0
1
2、增加雙向綁定
在上面的模板基礎上，我們新增雙向綁定，新增2個input標簽，并使用v-model與props中的屬性進行綁定
<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>
以上代碼就完成了雙向綁定，但是會有報錯警告
當我們在子組件中與props雙向綁定的時候，會出現(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,
}
},
當我們與data進行綁定以后，就不會出現(xiàn)報錯了
3、反向綁定
接著上面的思路，我們希望input輸入值的時候，改變data中的同時，也同時改變父組件中num1和num2的值，這時就需要反向綁定通過子傳父，
下面是完整的代碼：
<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ā)出一個事件
this.$emit("num1change", this.dnumber1)
},
num2Input(event){
// 1.將input中的value賦值到dnumber中
this.dnumber2 = event.target.value
// 2.為了讓父組件可以修改值，需要發(fā)出一個事件
this.$emit("num2change", this.dnumber2)
}
}
}
},
})
</script>
效果如下：
六、組件訪問父訪問子
當我們父組件中需要使用子組件中的函數(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，組件中定義了一個方法showMessage和屬性name - 2.父組件中使用子組件
cpn，并綁定了一個屬性ref值為aaa，相當于是唯一標識 - 3.父組件的方法
btnClick需要使用子組件中的方法和屬性，只需要this.$refs.aaa，這里的aaa就是上面綁定的子組件的屬性 - 4.最后使用
this.$refs.aaa.name就代表使用了子組件中的name屬性
到此這篇關于Vue子組件與父組件詳細解析的文章就介紹到這了,更多相關Vue子組件與父組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue項目打包過后發(fā)現(xiàn)地址錯了或者發(fā)布到別的服務器發(fā)現(xiàn)請求的地址不對,每次都要去重新打包,太浪費時間,下面這篇文章主要給大家介紹了關于Vue項目打包后可修改基礎接口地址配置的具體操作,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 項目中使用Loading組件的示例代碼，使用 loding 過渡數(shù)據(jù)的加載時間2018-08-08
UniApp是一個基于Vue.js開發(fā)的跨平臺應用開發(fā)框架,它可以使用一套代碼同時構建iOS、Android和Web應用,這篇文章主要給大家介紹了關于如何使用vue3+uni-app封裝音樂播放插件的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了Vue的列表之渲染,排序,過濾，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vite創(chuàng)建vue3項目頁面引用public下js文件失敗解決辦法
Vue3相較于之前的版本有了不少變化,如引用全局Js文件,這篇文章主要給大家介紹了關于vite創(chuàng)建vue3項目頁面引用public下js文件失敗的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了vue使用Highcharts實現(xiàn)3D餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue實現(xiàn)一個6個輸入框的驗證碼輸入組件功能的實例代碼
這篇文章主要介紹了vue實現(xiàn)一個6個輸入框的驗證碼輸入組件功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06
vue項目本地開發(fā)完成后部署到服務器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關于vue項目本地開發(fā)完成后部署到服務器后報404錯誤的解決方案,需要的朋友可以參考下2024-01-01