Vue元件：$parent和$root
阿新 • • 發佈：2020-08-14
1.父元件把方法傳遞給了子元件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <school v-for="item,index in schoolList" :action="changeEvent" :key="'abc'+index" :index='index' :school-name="item"></school> <h3>你選擇的學校是：{{chooseSchool}}</h3> </ul> </div> <script> Vue.component("school", { props: ['schoolName', 'index', 'action'], template: ` <li> <h3>{{index}}-學校名稱：{{schoolName}}</h3> <button @click="chooseEvent(schoolName)">選擇學校</button> </li> `, methods: { //把引數傳給父元件 chooseEvent: function (schoolName) { this.action(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>
-
changeEvent可以改變chooseSchool的值，不知道哪個子元件呼叫，也不知道子元件的值是多少？
-
我們在元件中定義一個方法！這個方法寫在元件的methods裡面。
<button @click="chooseEvent(schoolName)">選擇學校</button>
- 我們在methods方法呼叫引數裡面的action,來把子元件數值傳給父元件
methods: { //把引數傳給父元件 chooseEvent: function (schoolName) { this.action(schoolName) } }
-
所以必須在引數列表props中定義一個action
props: ['schoolName', 'index', 'action'], -
然後在school標籤中把action繫結父元件app中的changeEvent方法
:action="changeEvent"
2.更簡單的方法$parent
直接在子元件通過this.$parent.changeEvent(schoolName)來呼叫
1.通過$parent來呼叫父元件，可以獲取父元件的方法，屬性等全部資料
2.當操作邏輯簡單的時候，就可以直接用$parent.方法
也可以使用$parent.屬性來使用
<button @click="$parent.chooseSchool=schoolName">選擇學校</button>
<button @click="$parent.changeEvent(schoolName)">選擇學校</button>
<button @click="$root.changeEvent(schoolName)">選擇學校</button>
但是不推薦這麼寫，這樣寫的耦合程度太高了
3.獲取當前元件的根元件$root
建議使用props屬性來修改，這樣可以減少耦合，不推薦這種直接修改的方法