VueDay14子元素通過$parent或者$root傳值父元素
阿新 • • 發佈：2020-10-10
從父元件傳值到子元件
因為父元素的方法可以直接修改父元素的資料，所以將父元素的方法傳遞給子元素，然後子元素進行呼叫，從而修改父元素的資料
$root,$parent,$children
1.子元素通過$parent方法修改父元素的內容：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <!-- 從父元件傳值到子元件 --> <!-- 迴圈傳值元件 --> <!-- 因為父元素的方法可以直接修改父元素的資料 所以將父元素的方法傳遞給子元素， 然後子元素進行呼叫，從而修改父元素的資料 --> <!-- :action='changeEvent' --> <school v-for="item,index in schoolList" :key="index" :index="index" :school-name="item"></school> </ul> <h2>選中的學校是：{{chooseSchool}}</h2> </div> <script type="text/javascript"> // 產品元件 Vue.component("school",{ // props告知是父元素傳過來的值 props:['schoolName','index','action'], // 反引號可以換行寫標籤名 // 同時子元件可以通過呼叫內建的 $emit 方法並傳入事件名稱來觸發一個事件 template:`<li> <h3>{{index+1}}-學校名稱：{{schoolName}}</h3> <button @click="chooseEvent(schoolName)">選擇學校</button> </li>`, methods:{ chooseEvent:function(schoolName){ // // 將子元素的資料傳遞給父元素，需要自定義觸發事件，實現資料的傳值 // // this.$emit(this) // // 觸發一個事件名稱叫cSchool的事件 // this.$emit('cschool',schoolName) // console.log(schoolName) console.log(this) // 元件可以通過$parent屬性找到父元素的Vue物件 this.$parent.changeEvent(schoolName) } } }) // 根元件 let app = new Vue({ el:"#app", data:{ schoolList:['清華','北大','浙大','中大'], chooseSchool:"" }, methods:{ changeEvent:function(data){ // console.log("觸發學校選擇事件") console.log(this) this.chooseSchool = data } } }) </script> </body> </html>
2.子元素通過$parent方法修改父元素的內容 （在檢視直接呼叫父元素方法）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <!-- 從父元件傳值到子元件 --> <!-- 迴圈傳值元件 --> <!-- 因為父元素的方法可以直接修改父元素的資料 所以將父元素的方法傳遞給子元素， 然後子元素進行呼叫，從而修改父元素的資料 --> <!-- :action='changeEvent' --> <school v-for="item,index in schoolList" :key="index" :index="index" :school-name="item"></school> </ul> <h2>選中的學校是：{{chooseSchool}}</h2> </div> <script type="text/javascript"> // 產品元件 Vue.component("school",{ // props告知是父元素傳過來的值 props:['schoolName','index','action'], // 反引號可以換行寫標籤名 // 同時子元件可以通過呼叫內建的 $emit 方法並傳入事件名稱來觸發一個事件 // 在檢視直接呼叫父元素方法 template:`<li> <h3>{{index+1}}-學校名稱：{{schoolName}}</h3> <button @click="$parent.changeEvent(schoolName)">選擇學校</button> </li>`, methods:{ chooseEvent:function(schoolName){ // // 將子元素的資料傳遞給父元素，需要自定義觸發事件，實現資料的傳值 // // this.$emit(this) // // 觸發一個事件名稱叫cSchool的事件 // this.$emit('cschool',schoolName) // console.log(schoolName) console.log(this) // 元件可以通過$parent屬性找到父元素的Vue物件 //this.$parent.changeEvent(schoolName) } } }) // 根元件 let app = new Vue({ el:"#app", data:{ schoolList:['清華','北大','浙大','中大'], chooseSchool:"" }, methods:{ changeEvent:function(data){ // console.log("觸發學校選擇事件") console.log(this) this.chooseSchool = data } } }) </script> </body> </html>
3.$root：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <!-- 從父元件傳值到子元件 --> <!-- 迴圈傳值元件 --> <!-- 因為父元素的方法可以直接修改父元素的資料 所以將父元素的方法傳遞給子元素， 然後子元素進行呼叫，從而修改父元素的資料 --> <!-- :action='changeEvent' --> <school v-for="item,index in schoolList" :key="index" :index="index" :school-name="item"></school> </ul> <h2>選中的學校是：{{chooseSchool}}</h2> </div> <script type="text/javascript"> // 產品元件 Vue.component("school",{ // props告知是父元素傳過來的值 props:['schoolName','index','action'], // 反引號可以換行寫標籤名 // 同時子元件可以通過呼叫內建的 $emit 方法並傳入事件名稱來觸發一個事件 // 在檢視直接呼叫父元素方法 template:`<li> <h3>{{index+1}}-學校名稱：{{schoolName}}</h3> <button @click="$root.changeEvent(schoolName)">選擇學校</button> </li>`, methods:{ chooseEvent:function(schoolName){ // // 將子元素的資料傳遞給父元素，需要自定義觸發事件，實現資料的傳值 // // this.$emit(this) // // 觸發一個事件名稱叫cSchool的事件 // this.$emit('cschool',schoolName) console.log(schoolName) console.log(this) // 元件可以通過$parent屬性找到父元素的Vue物件 //this.$parent.changeEvent(schoolName) } } }) // 根元件 let app = new Vue({ el:"#app", data:{ schoolList:['清華','北大','浙大','中大'], chooseSchool:"" }, methods:{ changeEvent:function(data){ // console.log("觸發學校選擇事件") console.log(this) this.chooseSchool = data } }, mounted() { console.log(this) } }) </script> </body> </html>