vue基础入门（第四节）【连载...】

                                                                       Vue基础入门(第四节)

--------------------------------------------------------------------------------------------------------------------------

一、组件间通信

二、相关扩展

=============================================================

demo代码地址：https://github.com/darkcityX/vueDemo

--------------------------------------------------------------------------------------------------------------------------

一、组件间通信

         重点：组件间通信+路由模块+网络请求模块

        1、父组件与子组件通信（props down）

                 （1）、传值

                            <son uname="尼古拉斯康蒂"></son>

                （2）、接受

                            Vue.component('son',{

                                          props: ['uname','tips'],

                                          template:`

                                                    <div>

                                                                <p>{{uname}}</p>

                                                                <input  type='text' :placeholder='tips' />

                                                    </div>

                                          `

                            });

                 练习：三个组件my-input、my-button、my-login

        2、子组件与父组件通信（events up）

                 确认：子组件把数据发给父组件

                  1）、绑定事件

                       1.1）、在父组件中定义一个方法，用来给子组件指定事件的处理函数

                                rcvMsg:function(msg){

                                          //msg就是通过事件所传递来的 值

                                }

                       1.2）、父组件中调用子组件时，绑定事件

                                   <son @customEvent="rcvMsg"></son>

                   2）、子组件的内部去触发事件

                                    this.$emit('customEvent',123)

                    练习： my-user： 用户名   输入框  按钮

                                my-chatroom： 无序列表 + my-user + my-user

                  3）、ref可以让父组件主动的到子组件中取值

                             1))、指定引用的名称

                                        <son ref="mySon"></son>

                             2))、根据引用的名称找到组件的实例（对象）

                                         this.$refs.mySon

                              注意：不要试图通过ref属性去传值，ref在使用的过程中是一个关键之，旨在指定一个引用的名称

                4）、$parent

                         子组件可以通过this.$parent得到父组件的实例对象

                          总结：在父子相互通信的过程中— — 

                          父 ==>  子       props  down      this.$parent

                          子 ==>  父       events up          this.$refs.mySon

              3、兄弟组件之间的通信

                        var bus = new Vue();

                        bus.$on('eventName',function(msg){});

                        bus.$emit('eventName',数据)

                      练习：

                              在当前案例的基础上，给熊二组件添加一个按钮，点击按钮，告诉熊大： ‘怕啥！’

二、相关扩展

         为了让vue组件化的开发方式更容易维护和开发，有多种方式来创建组件

         1、全局组件

                Vue.component('test',{

                          template : `<h1></h1>`

                })

         2、局部组件

              new vue({

                      components:{

                                my-component:{

                                         template:""

                                }

                      }

              })

         3、通过模板指定

             <script type='text/x-template' id="myContent"></script>

             Vue.component('my-component',{

                       template: '#myContent'

             })

          4、单文件组件

              以.vue结尾的文件

              一个Vue结尾的文件就是以恶组件，而这个文件是通过template去指定模板内容，通过script去指定业务逻辑，通过style指定样式

 

三、综合练习

     todobox

      （1）、完成组件的创建和使用

      （2）、add

               功能1： 在todoinput的按钮单击时，将输入框中的内容传递给todolist（兄弟组件通信）

               功能2： todolist将接收到数据  传递给todoitem（父与子通信）

      （3）、delete