vue实现图片放大

<script>
  var Event = new Vue();
 
  //组件A
  var A = {
    data: function() {
      return {
        a: "../images/1.jpg",
        b: "../images/2.png",
        c: "../images/3.jpg"
      }
    },
    template: `<div>
<img :src="a" width="200px" height="150px" @click="send">
<img :src="b" width="200px" height="150px" @click="send1">
<img :src="c" width="200px" height="150px" @click="send2">
       </div>
    `,
    methods: {
      send:function(){
        Event.$emit("a-msg", this.a);
      },
send1:function(){
        Event.$emit("a-msg", this.b);
      },
send2:function(){
        Event.$emit("a-msg", this.c);
      }

    }
  };

  //组件B
  var B = {
    template: `
      <div>
<img :src="a" width="600px" height="500px">
      </div>
    `,
    mounted () {

      //接收A组件的数据
      Event.$on("a-msg", function (msg) {
this.a=msg;
      }.bind(this));
 
    },
    data () {
      return {
        a: "../images/1.jpg",
        
      }
    }
  };

  window.onload = function () {

    new Vue({
      el: "#box",
      components: {
        "dom-a": A,
        "dom-b": B
      }
    });

 

  };
</script>
 <div id="box">
    <dom-a></dom-a>
    <dom-b></dom-b>
 </div>

 

转载于:https://www.cnblogs.com/JKMI/p/7875375.html