component -- 組件傳值子傳父 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 子傳父 ~~~ 1.想要子傳父，通過子組件控制父組件方法，進而讓父組件的方法自己改變自己的data 2.明確父組件綁定的dom上內容作用域都屬于父組件的，因此傳值的都是父組件的data或者methods例如下面的案例，首先v-bind:title = 'title'和 :click='parentClick' 中左面都是子組件的接受的變量值，右面都有可能是父組件 data或者methods傳值,父傳子不僅僅可以傳data也可以傳methods: <div id='app'>  <my-com v-bind:title = 'title' :func='parentClick'></my-com> <div> 3.簡單總結:等號左面的屬于子組件的右面屬于父組件 ~~~ >[info] ## 子傳父 ~~~ 1.子傳父就是子組件控制父組件方法，讓父組件變相改變自己data 2.需要在子組件methods，某個方法中使用$emit('func','傳遞的參數') 來控制 3.這種控制是變相的，因此會在子組件中單獨有一個事件在內部專門觸發，$emit 方法。 ~~~ >[danger] ##### 使用$emit -- 案例 ![](https://box.kancloud.cn/429e3cd47a7eded5e1a48afa505ab302_337x315.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> {{count}}  <my-Com2 @fun="myChange"></my-Com2> </div> <template id="com">  <button @click="changeParent">操作父組件的子組件方法</button> </template> <script> let myCom2 = { template:'#com', data(){ return { title:'子組件', } }, methods:{ // 用來專門觸發父組件方法子組件，用來觸發$emit changeParent(){ // 根據上面的介紹原則等號左面的屬于子組件的右面屬于父組件 // 因此fun是子組件的,告訴自己的組件的點擊事件，點擊后觸發 // $emit,讓他去找參數中和func綁定的父組件的方法 // 第二個參數可以往父組件傳值 this.$emit('fun','我是傳值') } }, }; var vm = new Vue({ el: '#app', data:{ count:0, }, methods:{ // 子組件操控父組件改變自己data的方法 myChange(args){ console.log(args) this.count++; } }, components:{ // 在外部聲明變量，使用代碼簡潔 myCom2, } }); </script> </body> </html> ~~~ >[danger] ##### 使用 -- sync語法糖案例 ~~~ 1.2.3.0新增的語法糖 2.這種就不涉及到通過方法去操控父組件中的data改變，而是利用子傳父的思想，把props中的屬性值和父組件中的data形成捆綁，利用$emit改變子組件的 data，變相改變了父組件中的data ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> {{count}}  <my-Com2 v-bind:parent-Count.sync = 'count'></my-Com2> </div> <template id="com">  <button @click="changeParent">操作父組件的子組件方法</button> </template> <script> let myCom2 = { template:'#com', data(){ return { title:'子組件', } }, // 父傳子 props:['parentCount'], methods:{ // 用來專門觸發父組件方法子組件，用來觸發$emit changeParent(){ // 根據上面的介紹原則等號左面的屬于子組件的右面屬于父組件 // 將父子組件data 都綁定在一起，改變子組件就是改變了父組件 this.$emit('update:parentCount',1000) } }, }; var vm = new Vue({ el: '#app', data:{ count:0, }, components:{ // 在外部聲明變量，使用代碼簡潔 myCom2, } }); </script> </body> </html> ~~~ >[danger] ##### props -- 利用函數回調的方式，不推薦使用 ~~~ 1.這種方法不推薦，利用的是在父組件綁定一個和子組件相關的方法利用props ，在子組件去調用方法的時候，變相的調用父組件和props相關綁定的方法，形成回調函數，來實現子傳父 ~~~ * 子組件的寫法 ~~~ <template> <div> <h1 @click="changeMessage">{{message}}</h1> </div> </template> <script> export default { name: 'test', props:{ message:{ type:String, }, onChange: { type: Function, default: () => {} } }, methods:{ changeMessage(){ // 觸發和父組件形成綁定關系的props this.onChange('測試') } } } </script> <style scoped lang="less"> </style> ~~~ * 父組件的寫法 ~~~ <template> <Test :onChange="changeMessage"/> </template> <script> import Test from '@/components/test.vue' export default { name: "Index", components:{ Test }, data(){ return{ pMessage:'測試111' } }, methods:{ // 將父組件的方法和子組件的props方法綁定形成回調 changeMessage(val){ this.pMessage = val } } } </script> <style scoped> </style> ~~~