vue-元件傳值

vue元件之間互相傳值：父傳子，子傳父以及平行傳值

一.父元件向子元件傳值

父元件—子元件傳值:通過在子元件上綁定自定義屬性，屬性值為父元件需要的傳遞的資料，子元件對象通過props接收屬性名，屬性名指代就是父元件資料。

源碼：

<div id="app">
      <h2>父子元件傳值</h2>
      <hr />
      <v-parent></v-parent>
    </div>



    <template id="con">
      <div>
        <h3>父層元件</h3>
        <p>{{ title }}</p>
        <hr />
        <v-child :name="title"></v-child>
      </div>
    </template>
    
    <template id="child">
      <div>
        <h3>子層元件</h3>
        <p>接收父元件資料：{{ name }}</p>
      </div>
    </template>

    <script>
      var app = new Vue({
        el: "#app",
        components: {
          "v-parent": {
            template: "#con",
            data() {
              return {
                title: "hi 父元件"
              };
            },
            components: {
              "v-child": {
                template: "#child",
                props: ["name"] //子元件接收資料
              }
            }
          }
        }
      });
    </script>
           

二.子元件向父元件傳值

子元件----父元件：在子元件标簽上綁定自定義事件，内部通過$emit給該事件推送子元件資料，父元件内部通過函數接收

源碼：

<div id="app">
      <h2>子元件--父元件 傳值</h2>
      <hr />
      <v-parent></v-parent>
    </div>

    <template id="con">
      <div>
        <h3>父層元件</h3>
        <p>接收子元件資料:{{ str }}</p>
        <hr />
        <!-- 綁定自定義事件 -->
        <v-child @toparent="getval"></v-child>
      </div>
    </template>

    <template id="child">
      <div>
        <h3>子層元件</h3>
        <p>{{ title }}</p>
        <button @click="send($event)">發送給父元件</button>
      </div>
    </template>


    <script>
      var app = new Vue({
        el: "#app",
        components: {
          "v-parent": {
            template: "#con",
            data() {
              return {
                str: ""
              };
            },
            methods: {
              //通過函數接收子元件推送的資料
              getval(msg) {
                this.str = msg;
                console.log(msg);
              }
            },
            components: {
              "v-child": {
                template: "#child",
                data() {
                  return {
                    title: "this is child title 這是子元件資料"
                  };
                },
                methods: {
                  send() {
                    // 調用$emit方法給toparent事件推送資料
                    this.$emit("toparent", this.title);
                  }
                }
              }
            }
          }
        }
      });
    </script>
           

三.平行傳值

平行元件 利用vue對象，調用$emit $on 進行資料時間推送

源碼：

<div id="app">
      <h2>平行元件傳值</h2>
      <v-a></v-a>
      <hr />
      <v-b></v-b>
      <hr />
      <v-c></v-c>
    </div>

    <template id="demoA">
      <div>
        <h3>AAA元件</h3>
        <p>{{ info }}</p>
        <button @click="send()">發送給c元件</button>
      </div>
    </template>

    <template id="demoB">
      <div>
        <h3>BBB元件</h3>
        <p>{{ info }}</p>
        <button @click="send()">發送給c元件</button>
      </div>
    </template>

    <template id="demoC">
      <div>
        <h3>CCC元件</h3>
        <p>接收aaa:{{ stra }}</p>
        <p>接收bbb:{{ strb }}</p>
      </div>
    </template>

    <script>
      var vm = new Vue({}); //聲明獨立空vue對象 ，確定推送和接收的調用統一
      var app = new Vue({
        el: "#app",
        components: {
          "v-a": {
            template: "#demoA",
            data() {
              return {
                info: "hi aaaa"
              };
            },
            methods: {
              send() {
                //$emit推送資料
                vm.$emit("isa", this.info);
              }
            }
          },
          "v-b": {
            template: "#demoB",
            data() {
              return {
                info: "hi bbbb"
              };
            },
            methods: {
              send() {
                vm.$emit("isb", this.info);
              }
            }
          },
          "v-c": {
            template: "#demoC",
            data() {
              return {
                stra: "",
                strb: ""
              };
            },
            mounted() {
              var _this = this;
              //$on接收
              vm.$on("isa", function(data) {
                console.log(data);
                _this.stra = data;
              });
              vm.$on("isb", function(data) {
                console.log(data);
                _this.strb = data;
              });
            }
          }
        }
      });
    </script>