最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> Vue2——单一事件管理组件通信& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞//准备一个空的实例对象
var事件=new Vue ();//组件
var={
模板:
& lt; div>
& lt; span>我是一组件的数据→{{一}}& lt;/span>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/把数据传给C”@click=胺⑺汀北?
& lt;/div>
”,
方法:{
send () {
事件。美元发出(“a-msg”, this.a);
}
}，
数据(){
返回{
答:"我是一个组件中数据”
}
}
};//组件B
var B={
模板:
& lt; div>
& lt; span>我是B组件的数据→{{一}}& lt;/span>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/把B数据传给C”@click=胺⑺汀北?
& lt;/div>
”,
方法:{
send () {
事件。美元发出(“b-msg”, this.a);
}
}，
数据(){
返回{
答:“我是b组件中数据”
}
}
};//组件C
var C={
模板:
& lt; div>
& lt; h4>我是C组件& lt;/h4>
& lt; span>接收过来一个的数据为:{{一}}& lt;/span>
& lt; br>
B & lt; span>接收过来的数据为:{{B}} & lt;/span>
& lt;/div>
”,
安装(){//接收一组件的数据
事件。美元(“a-msg”功能(a) {
这一点。一个=;
}.bind ());//接收B组件的数据
事件。美元(“b-msg”功能(a) {
这一点。b=一个;
}.bind ());
}，
数据(){
返回{
答:",
乙:“”
}
}
};
窗口。onload=function () {
新Vue ({
埃尔:“#箱”,
组件:{
“dom-a”:,
“dom-b”: B,
“dom-c”: C
}
});
};
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt; dom-a> & lt;/dom-a>
& lt; dom-b> & lt;/dom-b>
& lt; dom-c> & lt;/dom-c>
& lt;/div>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
