Vuejs 用$emit 與 $on 來進行兄弟組件之間的數據傳輸

本文轉載自查看原文 2017-02-11 11:44 27262 Vuejs

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8" />
  5     <title>Vue2-單一事件管理組件通信</title>
  6     <script src="vue.js"></script>
  7     <script type="text/javascript">
  8 
  9     //准備一個空的實例對象
 10     var Event = new Vue();
 11 
 12     //組件A
 13     var A = {
 14         template: `
 15             <div>
 16                 <span>我是A組件的數據->{{a}}</span>
 17                 <input type="button" value="把A數據傳給C" @click = "send">
 18             </div>
 19         `,
 20         methods: {
 21             send () {
 22                 Event.$emit("a-msg", this.a);
 23             }
 24         },
 25         data () {
 26             return {
 27                 a: "我是a組件中數據"
 28             }
 29         }
 30     };
 31     //組件B
 32     var B = {
 33         template: `
 34             <div>
 35                 <span>我是B組件的數據->{{a}}</span>
 36                 <input type="button" value="把B數據傳給C" @click = "send">
 37             </div>
 38         `,
 39         methods: {
 40             send () {
 41                 Event.$emit("b-msg", this.a);
 42             }
 43         },
 44         data () {
 45             return {
 46                 a: "我是b組件中數據"
 47             }
 48         }
 49     };
 50     //組件C
 51     var C = {
 52         template: `
 53             <div>
 54                 <h3>我是C組件</h3>
 55                 <span>接收過來A的數據為: {{a}}</span>
 56                 <br>
 57                 <span>接收過來B的數據為: {{b}}</span>
 58             </div>
 59         `,
 60         mounted () {
 61            //接收A組件的數據
 62            Event.$on("a-msg", function (a) {
 63                 this.a = a;
 64            }.bind(this));
 65 
 66            //接收B組件的數據
 67            Event.$on("b-msg", function (a) {
 68                 this.b = a;
 69            }.bind(this));
 70         },
 71         data () {
 72             return {
 73                 a: "",
 74                 b: ""
 75             }
 76         }
 77     };
 78     window.onload = function () {
 79         new Vue({
 80             el: "#box",
 81             components: {
 82                 "dom-a": A,
 83                 "dom-b": B,
 84                 "dom-c": C
 85             }
 86         });
 87     };
 88 
 89 
 90     </script>
 91 </head>
 92 <body>
 93     <div id="box">
 94         <dom-a></dom-a>      
 95         <dom-b></dom-b>      
 96         <dom-c></dom-c>      
 97     </div>
 98 
 99 </body>
100 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vuejs 用$emit 與 $on 來進行兄弟組件之間的數據傳輸 Angular組件間的數據傳輸應用系統之間數據傳輸的幾種方式應用系統之間數據傳輸的幾種方式用sessionStorage實現頁面之間的數據傳輸應用系統之間數據傳輸的幾種方式使用Python進行數據傳輸 axios數據傳輸數據傳輸對象 AJAX數據傳輸