vue2.0 组件通信

组件通信:
    子组件要想拿到父组件数据 props
    子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,
    对象之间引用。

    例子:
      <script>
        window.onload=function(){
            new Vue({
              el:'#box',
              data:{
                giveData:{
                    a:'我是父组件数据'
                  }
                },
              components:{
                'child-com':{
                  props:['msg'],
                  template:'#child',
                  methods:{
                      change(){
                   
                        this.msg.a='被改了';
                        }
                      }  
                    }
                  }
                 });
              };
      </script>
      <template id="child">
          <div>
            <span>我是子组件</span>
            <input type="button" value="按钮" @click="change">
            <strong>{{msg.a}}</strong>
          </div>
      </template>

      <div id="box">
          父级: ->{{giveData.a}}
        <br>
        <child-com :msg="giveData"></child-com>
      </div>

  例子:自定义事件

    

  <script>
    //准备一个空的实例对象
    var Event=new Vue();

      var A={
          template:`
                <div>
                  <span>我是A组件</span> -> {{a}}
                  <input type="button" value="把A数据给C" @click="send">
                </div>
`              ,
              methods:{
                  send(){
                      Event.$emit('a-msg',this.a);
                }
          },
          data(){
              return {
                a:'我是a数据'
              }
            }
        };
      var B={
            template:`
                  <div>
                      <span>我是B组件</span> -> {{a}}
                      <input type="button" value="把B数据给C" @click="send">
                  </div>
              `,
            methods:{
                send(){
                    Event.$emit('b-msg',this.a);
                }
            },
          data(){
            return {
                a:'我是b数据'
              }
          }
        };
      var C={
        template:`
              <div>
                <h3>我是C组件</h3>
                <span>接收过来的A的数据为: {{a}}</span>
                <br>
                <span>接收过来的B的数据为: {{b}}</span>
              </div>
            `,
            data(){
              return {
                  a:'',
                  b:''
                }
             },
          mounted(){
                //var _this=this;
                //接收A组件的数据
                Event.$on('a-msg',function(a){
                      this.a=a;
                }.bind(this));

                //接收B组件的数据
                Event.$on('b-msg',function(a){
                      this.b=a;
                  }.bind(this));
                }
            };

        window.onload=function(){
              new Vue({
                  el:'#box',
                  components:{
                        'com-a':A,
                        'com-b':B,
                        'com-c':C
                  }
              });
        };
    </script>

<body>
   <div id="box">
      <com-a></com-a>
      <com-b></com-b>
      <com-c></com-c>
  </div>
</body>

上一篇:Aspose.word总结


下一篇:python希尔(Hill)密码加解密实现