<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
相关资源：vue中element-ui表格缩略图悬浮放大功能的实例代码