免费抠图软件_图片加文字_在线制作拼图的网站_图片处理神器_在线抠图 免费
当前位置:建站首页 > 新闻资讯 > 网站设计 >

这样去开发小程序_Vuejs 用$emit与$on来进行兄弟组

发表日期:2021-01-12 13:47文章编辑:jianzhan浏览次数: 标签:    

Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信       本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例,非常具有实用价值,需要的朋友可以参考下。
span 我是A组件的数据- {{a}} /span input type="button" value="把A数据传给C" @click = "send" /div methods: { send () { Event.$emit("a-msg", this.a); data () { return { a: "我是a组件中数据" //组件B var B = { template: ` div span 我是B组件的数据- {{a}} /span input type="button" value="把B数据传给C" @click = "send" /div methods: { send () { Event.$emit("b-msg", this.a); data () { return { a: "我是b组件中数据" //组件C var C = { template: ` div h3 我是C组件 /h3 span 接收过来A的数据为: {{a}} /span span 接收过来B的数据为: {{b}} /span /div mounted () { //接收A组件的数据 Event.$on("a-msg", function (a) { this.a = a; }.bind(this)); //接收B组件的数据 Event.$on("b-msg", function (a) { this.b = a; }.bind(this)); data () { return { a: "", b: "" window.onload = function () { new Vue({ el: "#box", components: { "dom-a": A, "dom-b": B, "dom-c": C
相关新闻