文章目錄
1. $parent,$children屬性
在介紹傳參方式之前,我們先來看一下 $parent,$children屬性.
我們先來看下面的代碼,在裏面定義了一個子組件,一個父組件,在子組件中添加了 handleClick 方法:
<div id="app">
<button @click="FatherBtn">父組件按鈕</button>
<son-com></son-com>
</div>
<script>
//定義子組件
let SonCom = ({
template:`
<button @click = "handleClick">子組件按鈕</button>
`,
methods:{
handleClick(){
console.log(this);
console.log(this.$parent);
}
}
})
let vm = new Vue({
el:"#app",
data:{
user:{
name:"joe"
}
},
components:{
SonCom,
},
})
</script>
在子組件中添加了一個方法打印 this ,我們來看看打印的結果:
可以看到她身上有這三個屬性,還有個 $root 屬性.
那麼我們在子組件中打印 this.$parent 會發生什麼呢??
handleClick(){
console.log(this);
console.log(this.$parent);
}
打印的結果如下:
可以看到他找到了自己的父組件,也是就是 Vue 的實例化對象.
那麼我們在父組件中打印 this.$children 的結果也可以看看,在父組件中添加下面的方法:
methods:{
FatherBtn(){
console.log(this.$children);
}
}
打印的結果如下:
打印的結果是一個數組,那麼我們就可以通過下標來獲取到我們想要的元素.
既然我們已經瞭解了在父組件中找到子組件的方法,在子組件中找到父組件的方法,那麼我們在子組件中執行父組件的方法豈不是會很簡單.
2.利用$parent在子組件中執行父組件的方法
看下面的代碼:
<div id="app">
<h2>父組件中的數據{{user}}</h2>
<button @click="FatherBtn">父組件按鈕</button>
<son-com></son-com>
</div>
<script>
//定義子組件
let SonCom = ({
template:`
<button @click = "handleClick">子組件按鈕</button>
`,
methods:{
handleClick(){
//在子組件中找到父組件的方法並執行
this.$parent.ChangeUser();
}
}
})
let vm = new Vue({
el:"#app",
data:{
user:{
name:"joe"
}
},
components:{
SonCom,
},
methods:{
FatherBtn(){
console.log(this.$children[0]);
},
//定義添加屬性的方法
ChangeUser() {
this.user = Object.assign({},this.user,{age:19});
}
}
})
</script>
初始頁面的顯示結果如下圖:
仔細看代碼,我們在父組件中定義了一個名字叫 ChangeName 的方法來給user對象添加屬性,但是我們在子組件中執行了該方法,並沒有在父組件中直接執行,點擊按鈕之後的結果:
在上面的代碼裏面,添加的屬性是我們直接在父組件中定義好了的,那麼想想…
既然我們可以在子組件中執行父組件的方法,那麼肯定也可以傳參啊,就像下面這樣:
在上面的代碼的基礎上改變:
handleClick(){
this.$parent.ChangeUser({age:19});
}
//可以在父組件中打印傳過來的數據
ChangeUser(value) {
console.log(value)
this.user = Object.assign({},this.user,value);
}
代碼執行後的結果如下圖:
總結:子組件通過$parent獲取父組件實例,進而就可以在子組件中執行父組件的方法
3.父組件中執行子組件的方法
3.1 通過 $children 屬性
看下面的示例代碼:
<div id="app">
<h2>父組件中的數據{{user}}</h2>
<button @click="FatherBtn">父組件按鈕</button>
<son-com></son-com>
</div>
<script>
//定義子組件
let SonCom = ({
template:`
<div>
<h2>我是子組件中的數據{{msg}}</h2>
<button @click = "handleClick">子組件按鈕</button>
</div>
`,
data(){
return{
msg:"hello world"
}
},
methods:{
changeMsg(value){
console.log(value);
this.msg = value
}
}
})
let vm = new Vue({
el:"#app",
data:{
user:{
name:"joe"
}
},
components:{
SonCom,
},
methods:{
FatherBtn(){
console.log(this.$children[0]);
this.$children[0].changeMsg("你好,世界!");
},
}
})
初始顯示結果如下:
在父組件中定義了 FatherClick 方法,當我們點擊父組件中的按鈕時就會執行子組件中的方法.,結果如下:
可以看到打印的信息就是我們傳遞的參數 “你好,世界!” ,我們在父組件中執行了子組件的方法,並且改變了子組件的數據.
3.2 通過$ref屬性來執行
我們知道:
- ref屬性使用在普通DOM元素上,獲取的 是原生DOM元素
- ref屬性使用在組件省上,獲取就是組件的實例對象
所以我們可以通過 $ref 屬性來獲取子組件
示例代碼如下:
在上面代碼的基礎上,爲 son-com 標籤添加 ref 屬性,並且在父組件中打印:
<div id="app">
<h2>父組件中的數據{{user}}</h2>
<button @click="FatherBtn">父組件按鈕</button>
<son-com ref = "son"></son-com>
</div>
//父組件中的方法:
FatherBtn(){
console.log(this.$refs.son);
},
打印的結果如下,已經獲取到了我們想要的子組件:
所以我們就可以在父組件中執行子組件的方法,也可以傳參
在上面代碼的基礎上上,添加下面的代碼即可:
FatherBtn(){
console.log(this.$refs.son);
this.$refs.son.changeMsg("你好,世界!")
},
執行代碼後的結果:
總結
- 父組件獲取子組件的實例向子組件傳參, 可以通過
$children來獲取子組件實例 - 父組件獲取子組件的實例向子組件傳參, 也可以通過
$ref來獲取子組件實例
4. $root屬性的使用
$root 屬性顧名思義就是用來尋找他的根實例的.
let MinCom = ({
template:'#mincom',
methods:{
find(){
console.log(this.$parent);
console.log(this.$root)
}
}
})
let MyCom = ({
template:"#mycom",
components: {
MinCom,
}
})
let vm = new Vue({
el:"#app",
components:{
MyCom
}
})
通過上面幾行簡單的代碼,我們來了解 $root 屬性,看看它的打印結果:
觀察上面的打印的兩行信息,可以看到,this.$parent 打印出來的是他的父組件mycom而 this.$root 打印得到的信息是 它的根實例vue 的石榴花對象 vm .
所以通過這兩個屬性,我們就可以在 孫子組件中執行父組件和根實例中的方法,代碼如下:
<div id="app">
<div>
<h2>父組件中的數據{{user}}</h2>
<button @click="FatherBtn">父組件按鈕</button>
<son-com ref = "son"></son-com>
</div>
</div>
<!--定義小小組件模板-->
<template id="mincom">
<div>
<h2>{{msg}}</h2>
<button @click = "changeRoot">執行根實例中的方法</button>
<button @click = "changeFather">執行父組件中的方法</button>
</div>
</template>
<!--定義子組件模板-->
<template id="soncom">
<div>
<h2>子組件中的數據{{msg}}</h2>
<button @click = "handleClick">子組件按鈕</button>
<min-com></min-com>
</div>
</template>
<script>
let MinCom = ({
template: "#mincom",
data(){
return{
msg:"小小組件的數據"
}
},
methods:{
//執行根實例中分方法
changeRoot(){
this.$root.ChangeUser({
sex:"女",
})
},
//執行父組件中的方法
changeFather(){
this.$parent.changeMsg("我們都是最棒的");
},
},
})
//定義子組件
let SonCom = ({
template:`#soncom`,
data(){
return{
msg:"hello world"
}
},
components:{
MinCom,
},
methods:{
changeMsg(value){
console.log(value);
this.msg = value
},
//執行父組件中的方法
handleClick(){
this.$parent.ChangeUser({age:19});
}
}
})
let vm = new Vue({
el:"#app",
data:{
user:{
name:"joe"
}
},
components:{
SonCom,
},
methods:{
FatherBtn(){
// console.log(this.$refs.son);
// this.$refs.son.changeMsg("你好,世界!")
// console.log(this.$children[0]);
// this.$children[0].changeMsg("你好,世界!");
},
ChangeUser(value) {
console.log(value)
this.user = Object.assign({},this.user,value);
}
}
})
</script>
點擊按鈕之前的結果如下圖:
點擊按鈕之後的結果如下圖:
所以我們也可以在孫子組件中執行到父組件和根實例中的方法,使用的屬性就是 $parent 和 $root .