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>