vue.js之子组件向父组件传递数据
$emit (传递数据)
触发当前实例上的事件。附加参数都会传给监听器回调。
**
o
n
(
接
收
数
据
)
∗
∗
监
听
当
前
实
例
上
的
自
定
义
事
件
。
事
件
可
以
由
v
m
.
on (接收数据)** 监听当前实例上的自定义事件。事件可以由vm.
on(接收数据)∗∗监听当前实例上的自定义事件。事件可以由vm.emit触发。
回调函数会接收所有传入事件触发函数的额外参数。
子组件通过$emit传递数据到父组件
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script>
Vue.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>
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499269.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步