vue.js:子组件向父组件传递数据
$emit (传递数据)
触发当前实例上的事件。附加参数都会传给监听器回调。
**emit触发。
回调函数会接收所有传入事件触发函数的额外参数。
子组件通过$emit传递数据到父组件
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script>.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: '子组件的数据'
} //组件数据就是这样的,函数式的,请注意
},
methods: {
increment: function () {
this.$emit('increment', [this.counter]);
}
}
});
new Vue({
el: '#app',
data: {
total: '父组件的数据:'
},
methods: {
incrementTotal: function (e) {
this.total = this.total e[0]
console.log(e);
}
}
})</script>
- 在子组件上绑定一个click事件,触发 increment 方法
- 在 increment 方法中用 $emit 定义一个自定义事件 increment ,同时传入 [this.counter] 参数
- 在父组件 button-counter 上绑定步骤2中自定义的 increment 事件,方法名为 incrementTotal
- 在父组件中调用步骤3中的 incrementTotal 方法,这时 incrementTotal 方法就能接收到子组件传入的参数
兄弟组件之间的数据传递
//相当于new了一个vue实例,Event中含有vue的全部方法;
var Event = new Vue();
//发送数据,第一个参数是发送数据的名称,接收时还用这个名字接收,第二个参数是该数据的值;
Event.$emit('msg',this.msg);
//接收数据,第一个参数是数据的名字,与发送时的名字对应,第二个参数是一个方法,要对数据的操作
Event.$on('msg',function(msg){
//这里是对数据的操作
})
<div id="box">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div>
<script>//准备一个空的实例对象
var Event = new Vue();
//组件A
var A = {
template: `
<div>
<h3>{{a}}</h3>
<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>
<h3>{{a}}</h3>
<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>
<br>
<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
}
});
};</script>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhifiaab
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11