vue组件知识总结

vue组件化开发

• 将一个页面分割成若干个组件，一个页面js+css+html,将自己类容分割出来，方便开发，更好了维护我们的代码，每个组件封装自己的js+html+css,样式命名冲突

组件分类

• 页面级组件（ 例如详情页页面）

• 基础组件（页面的一部分，例如轮播图）

• 组件的目的为了实现复用

指令和组件

• 在标签内增加的行内属性，实现功能指令

• 组件就是一个自定义（扩展）的标签<hello></hello>，封装代码的,组件的标签名不能破坏原有的html标签

组件：全局组件（不需要引用），局部组件（需要引用）

• 在vue中一个对象就是一个组件

• 在组件中data是一个函数，目的是不受别人干扰，因为组件是独立的

• 使用组件的步骤，

  • 1.声明组件，并且引入到当前页面

  • 2.在组件的父级模板中调用这个组件

  • 组件名称不能和标签相同

• 全局组件

•  Vue.component('my-handsone',{
         //template只会有一个根元素，而且不能直接放置文本节点
          template:'<h1>{{msg}}</a></h1>',
          data(){
              return { //可以用来定义数据
                  msg:"帅吗",
                  types:[1,2,3]
              }
          }
      });
      let vm=new Vue({
          el:"#app",
          data:{}
      })

• 局部组件

• //一个对象就是一个组件
   let webeautiful={
          template:'<h1>{{msg}}</h1>',
          data(){
              return {
                  msg:"很帅呀"
              }
          }
      };
      let vm=new Vue({
          el:"#app",
          //挂载在vue实例中components
          components:{
              webeautiful
          }
      })

  组件的数据传递

  • 父传子属性传递 子组件通过props接收

  • props的api

    • type 接收数据的类型

    • default 默认数据的值

    • required 必须传递数据 不能和default同时引用

    • validator 自定义验证

  • 子传父组件，事件触发 $emit->@方法="父组件的方法"

  • 平级交互 eventBus 但是不用 -vuex

  • 父组件调用子类的方法 ref=>this.$ref.xxx.子类方法

  • slot 插槽 （设置一些空闲的位置等等使用）

  父亲传递给儿子数据

  • 先在儿子组件上绑定一个属性名，然后赋值给这个属性 :m="msg",

  • 儿子接受父亲传递的数据，用props接收传递的属性名字，例如 props:{m:{type:Array}}

  • // 父亲到儿子，默认组件是独立的，相互不能引用数据，可以通过属性方式传递给儿子
         let vm=new Vue({
             el:"#app",
             //根实例上的data都是对象，组件中的都是函数
             data:{
                 money:100
             },
             //父级传递给子集数据通过绑定属性,如果传递多个可以数组中写多个
             template:'<div><child :m="money" o="美女"></child></div>',
             components:{
                 child:{
                     //子集接收给父级给的数据，通过props属性接收
                     props:['m','o'],
                     computed:{
                         b(){
                             //这里的this指向子集child
                             //父亲的数据儿子不能更改 错误写法 this.o="丑呀"
                             return "大大"+this.o;
                         }
                     },
                     template:"<div>儿子 {{m}} {{b}}</div>"
                 }
         }
         })

    父亲接收儿子传递的参数

    • 儿子通过自定义事件方法中给父亲发射自己的数据

    • 先在儿子组件实例中created中发射一个数据

      • 例如 created(){//传递自己的数据

      this.$emit('childs',this.msg);

      }

    • 在儿子组件上要绑定这个自定义事件方法，然后里面赋值父亲接收的函数

      • 例如儿子组件 <child @childs="父亲接收的函数"></child>

    • 最后父亲接收的函数很简单，参数就是儿子传递的数据

      • 例如父亲接收的函数 fn(data){//这里面的data就是儿子发射给父亲的参数}

      • //实例化一个Vue函数
            let vm=new Vue({
                //child 是儿子 触发了自己的一个方法，绑定了父亲的一个函数方法
                template:'<div><child @childs="say"></child></div>',
                //方法挂载
                methods:{
                    //父亲的一个方法
                    say(data){
                       console.log(data);
                    }
                },
                //定义一个儿子组件
                components:{
                    //儿子名字
                    child:{
                        //事件和数据初始化之后
                        created(){
                            //儿子发射一个方法 传递自己的数据
                            this.$emit('childs',this.msg);
                        },
                        template:'<div>子</div>',
                        data(){
                            return {
                                msg:"我饿了"
                            }
                        },
        
                    }
                },
            }).$mount("#app"); //手动将vue挂载在#app标签上

    父亲和儿子实现双向数据绑定

    父亲传递给儿子数据，儿子触发一个父亲方法，将最新的值传递给父亲，父亲更改后，属性会重新传递儿子，儿子会刷新

    • 父亲先在儿子组件上通过绑定一个属性，然后给这个属性赋值，给儿子传递数据

      • 例如<child :m="msg"></child>

    • 儿子接收父亲的传递的数据props

      • props:{m:{type=Array}}

    • 儿子拿到数据后，要修改数据，（儿子无法把父亲传递的参数重新赋值）

    • 然后儿子重新发射一个自定义事件方法,后面跟要修改的值

      • this.$emit("ee",1000);

    • 此时儿子组件上要绑定发射的自定义方法，赋值父亲的接收的函数fn

      • <child :m="msg" @ee="fn"></child>

    • 父亲接收函数，参数就是儿子发射过来的数据

      • fn(data){//此时把儿子发射过来的数据data，重新赋值给第一次传递过去的msgreturn this.msg=data;}

    • 这样就成功了实现父与子之间的数据双向绑定

    • let vm = new Vue({
               el:'#app',
               //通过在儿子组件上绑定一个属性向儿子传递数据
               // @ee="fn" 接收儿子传递过来数据，ee是儿子那边自定义的事件方法，必须绑定在儿子组件上
               template:'<div>父亲+{{money}}<child :m="money" @ee="fn"></child></div>',
               data:{
                   money:100
               },
               methods:{
                   fn(data){
                    //父亲接收儿子的数据函数
                       return this.money=data;
                   }
               },
               components:{
                   child:{
                      //接收父亲传递过来的属性值
                       props:{m:{}},
                       template:'<div>{{m}}<button @click="more"></button></div>',
                       methods:{
                           more(){
                           //向父亲发射一个自定义方法，并传递过去自己的值
                               this.$emit('ee',1000)
                           }
                       }
                   }
               }
           })

      实现父亲月儿子之间的数据双向数据绑定 在高版本中有sync修饰符

      • 父亲先通过在儿子身上绑定一个属性，向儿子传递数据

      • 这时候，属性后面我们跟一个sync修饰符

      • 例如 <child :m.sync="msg"></child>

    • 这时候，儿子要通过props接受父亲传递的参数

      • props:{

        m:{
         type:Array  //规定是数据类型
        }

        }

    • 儿子接受到数据，发现不满意，发射一个自定义事件方法给父亲

      • this.$emit('update:m',1000);

    • 此时我们发现父亲的数据m自动更改了，变成1000

 let vm = new Vue({
         el:'#app',
         template:'<div>父{{msg}}<child :a.sync="msg"/></div>',
         data:{
             msg:'美女'
         },
         components:{
             child:{
                 props:['a'], //<comp :foo="bar" @update:foo="val => bar = val"></comp>
                 template:'<div>child {{a}} <button @click="change">换</button></div>',
                 methods:{
                     change(){ //固定的写法
                         //2.3.0版本以后才会用
                         //用了sync，下面必须用update
                         this.$emit('update:a','丑女');
                     }
                 }
             }
         }
     })

父亲调用子组件的一些方法

第一步先定义儿子有一个fn方法

methods:{fn(){ console.log("王阿姨好漂亮"); }}

第二步在儿子身上标记一个表示ref

<child ref="msg"></child>

第三步父亲在视图加载完成后，调用儿子的fn方法

mounted(){this.$refs.msg.fn();}

this.$refs.msg 调用儿子身上的msg表示，这时候this.$refs.msg指向的就是儿子的实例

实例.fn() 这就调用到了儿子的fn方法

• // ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例
       let vm=new Vue({
           el:"#app",
           template:'<child ref="c"></child>',
           //一定要放在mounted下面，因为mounted方法表示数据和视图渲染完成，
           mounted(){
               //当前的ref指向的是child组件的实例，通过实例调用下面的fn方法
               this.$refs.c.fn();
           },
           components:{
               child:{
                   template:'<div>child</div>',
                   methods:{
                       fn(){
                           alert("王阿姨好漂亮")
                       }
                   }
               }
           }
       })

  兄弟组件之间的数据通讯（就是平级组件之间的数据通讯）

  • 兄弟组件之间数据互通，要借助第三个vue实例

  • eventBus使用起来不好管理，命名冲突，而且复杂，一般不用

    • 我们通常叫这个实例叫eventBus

      • let eventBus=new Vue;

    • 将兄弟发射的自定义事件方法，挂载到eventBus实例上

      • eventBus.$emit('aa',''c');

    • 然后通过$on方法，将兄弟发射的自定义事件方法绑定里面去

    • 后面的回调函数一定要是箭头函数，不改变实例的this,方便赋值

      • 例如 eventBus.$on('aa',(data)=>{console.log(data) }

       let eventBus=new Vue;
          //eventBus使用起来不好管理，命名冲突，而且复杂，一般不用
          let C={
              template:'<div>{{val}}<button @click="ss">变C</button></div>',
              data(){
                  return {
                      val:"C"
                  }
              },
              methods:{
                  ss(){
      
                  eventBus.$emit('bb','C');
                  }
              },
              created(){
                  //
                  eventBus.$on('aa',(data)=>{
                      this.val=data;
                  })
              }
          };
          let D={
              template:'<div>{{val}}<button @click="ee">变D</button></div>',
              data(){
                  return {
                      val:"D"
                  }
              },
              created(){
                  //
                  eventBus.$on("bb",(data)=>{
                      this.val=data;
                  })
              },
              methods:{
                  ee(){
      //
                          eventBus.$emit('aa','D');
                      }
                  }
          }
          let vm = new Vue({
              el:'#app',
              //1,找共同父级，时间交互，非常复杂，不采用
              template:'<div><C></C><D></D></div>',
              data:{
      
              },
              components:{
                  C,
                  D
              }
          })

      使用 slot 分发内容

      slot 可以将不同的标签分开发送到指定的节点中

      slot 有一个name属性

      slot上的name属性，有一个默认值default

      没有指定slot名字的都叫default 会塞到name=default的组件内

      <div id="app">
            <hello>
                123
                <ul slot="bottom">
                    <li>我很帅</li>
                </ul>
                <ul slot="top">
                    <li>你丑</li>
                </ul>
                456
            </hello>
        </div>
        <template id="hello">
            <div>
                <!--slot是vue提供的内置插件，具名slot 在写内容时第一预留出来slot插口,如果没有使用则使用默认内容，没有指定slot名字的都叫default 会塞到name=default的组件内-->
                <slot name="default">nihao </slot>
                <slot name="top">这是上</slot>
                <slot name="bottom">这是下</slot>
            </div>
        </template>
        <script>
            let vm = new Vue({
                el:'#app',
                components:{
                    hello:{
                        template:'#hello'
                    }
                }
            })
        </script>

      vue动画组件 transition

      • transition有一个name属性

        • 假设我们name="fade"

      • transition动画组件对应三个css样式

      • 进入开始 .fade-enter 的样式

      • 开始过渡阶段 .fade-enter-active

      • 出去终点 .fade-leave-active

      • 这三个样式里面，我们可以任意写样式

      如果文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>