Vue 父元件往子元件傳遞方法
阿新 • • 發佈：2021-11-14
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10</head> 11 12 <body> 13 <div id="app"> 14 <!-- 父元件向子元件 傳遞 方法，使用的是 事件繫結機制； v-on, 15 當我們自定義了 一個 事件屬性之後，那麼，子元件就能夠，通過某些方式，來呼叫 傳遞進去的 這個 方法了 --> 16 <com2 @func123="show"></com2> 17 </div> 18 19 <template id="tmpl"> 20 <div> 21 <h1>這是子元件</h1> 22<input type="button" value="這是子元件中的按鈕 - 點選它，觸發 父元件傳遞過來的 func 方法" @click="myclick"> 23 </div> 24 </template> 25 26 <script> 27 // 定義了一個字面量型別的 元件模板物件 28 var com2 = { 29 template: '#tmpl', // 通過指定了一個 Id, 表示 說，要去載入 這個指定Id的 template 元素中的內容，當作 元件的HTML結構 30 data() {31 return { 32 sonmsg: '子元件中data中的資料' 33 } 34 }, 35 methods: { 36 myclick() { 37 // 當點選子元件的按鈕的時候，如何 拿到 父元件傳遞過來的 func 方法，並呼叫這個方法？？？ 38 // emit 英文原意： 是觸發，呼叫、發射的意思 39 // this.$emit('函式名稱', 引數, 引數) func123是 40 this.$emit('func123', this.sonmsg) 41 } 42 } 43 } 44 // 建立 Vue 例項，得到 ViewModel 45 var vm = new Vue({ 46 el: '#app', 47 data: { 48 datamsgFormSon: '父元件中的資料' 49 }, 50 methods: { 51 show(data) { 52 alert('呼叫了父元件身上的 show 方法: --- ' + this.datamsgFormSon) 53 this.datamsgFormSon = data 54 alert('呼叫了父元件身上的 show 方法: --- ' + this.datamsgFormSon) 55 } 56 }, 57 components: { 58 com2 59 } 60 }); 61 </script> 62 </body> 63 64 </html>
本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15551128.html