vue2.0 组件通信

组件通信:     子组件要想拿到父组件数据 props     子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,     对象之间引用。

    例子:

      <script>
                window.onload=function(){
                        new Vue({
                              el:'#box',
                              data:{
                                    giveData:{
                                            a:'我是父组件数据'
                                      }
                                },
                              components:{
                                    'child-com':{
                                          props:['msg'],
                                          template:'#child',
                                          methods:{
                                                  change(){
 
                                                        this.msg.a='被改了';
                                                    }
                                              }  
                                        }
                                  }
                             });
                      };
          </script>
      <template id="child">
                  <div>
                        <span>我是子组件</span>
                        <input type="button" value="按钮" @click="change">
                        <strong>{{msg.a}}</strong>
                  </div>
          </template>
          <div id="box">
                  父级: ->{{giveData.a}}
                <br>
                <child-com :msg="giveData"></child-com>
          </div>

  例子:自定义事件

   <script>
            //准备一个空的实例对象
            var Event=new Vue();
              var A={
                      template:`
                                <div>
                                      <span>我是A组件</span> -> {{a}}
                                      <input type="button" value="把A数据给C" @click="send">
                                </div>
            `              ,
                          methods:{
                                  send(){
                                          Event.$emit('a-msg',this.a);
                                }
                      },
                      data(){
                              return {
                                    a:'我是a数据'
                              }
                        }
                };
              var B={
                        template:`
                                  <div>
                                          <span>我是B组件</span> -> {{a}}
                                          <input type="button" value="把B数据给C" @click="send">
                                  </div>
                          `,
                        methods:{
                                send(){
                                        Event.$emit('b-msg',this.a);
                                }
                        },
                      data(){
                            return {
                                    a:'我是b数据'
                              }
                      }
                };
              var C={
                    template:`
                              <div>
                                    <h3>我是C组件</h3>
                                    <span>接收过来的A的数据为: {{a}}</span>
                                    <br>
                                    <span>接收过来的B的数据为: {{b}}</span>
                              </div>
                        `,
                        data(){
                              return {
                                      a:'',
                                      b:''
                                }
                         },
                      mounted(){
                                //var _this=this;
                                //接收A组件的数据
                                Event.$on('a-msg',function(a){
                                          this.a=a;
                                }.bind(this));
                                //接收B组件的数据
                                Event.$on('b-msg',function(a){
                                          this.b=a;
                                  }.bind(this));
                            }
                    };

                window.onload=function(){
                          new Vue({
                                  el:'#box',
                                  components:{
                                            'com-a':A,
                                            'com-b':B,
                                            'com-c':C
                                  }
                          });
                };
        </script>
<body>
       <div id="box">
              <com-a></com-a>
              <com-b></com-b>
              <com-c></com-c>
      </div>
</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏smy

prompt() 方法,弹框带输入框

prompt()  有alert的风格,却带着输入框,这是怎么实现的呢? 语法 prompt(text,defaultText) 参数 描述 t...

4185
来自专栏Crossin的编程教室

在 Python 程序中显示进度条

转自 http://my.oschina.net/jhao104/blog/681507 1、利用标准输出 先说一下文本系统的控制符: \r: 将光标移...

3287
来自专栏工具

推荐springboot banner(ASCII特殊文字)在线生成工具,实现自定义banner文字

如果文字工具不能满足需求,还可以选择更多的ASCII文字或者图形,截图如下(部分效果):

1.9K0
来自专栏无原型不设计

【Mockplus教程】页面属性

每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠...

3396
来自专栏React Native开发圈

React Native 弹出框组件

npm install--save react-native-popup-dialog

1461
来自专栏知晓程序

开发 | 想让小程序变得更漂亮?一招教你使用图标字体

图标字体,相信大家都不陌生。包括 font-awesome,iconic 等等,都是很不错的图标字体服务。

690
来自专栏云加头条

如何开通微信公众号同步?(微信打开)

1. .点击右上角按钮「. . .」,选择在浏览器中打开网页

5798
来自专栏前端说吧

Vue - 实战疑点总结

2997
来自专栏DT乱“码”

解决chrome测试的时候页面上的表单一直会自动填充

做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉。 下面上下图: ...

2177
来自专栏Android干货

小程序实践(四):动态控制组件的显示/隐藏

组件有个属性:hidden='' ,值为true/false ,当false的时候说明不隐藏,当true的时候说明隐藏,注意该隐藏是不保留组件位置的。

1152

扫码关注云+社区

领取腾讯云代金券