vue相关拓展

本文详细介绍了Vue.js中的v-for指令用于在组件中遍历数据,强调了父子组件作用域的独立性及如何通过props传递数据。接着探讨了可复用组件的概念,包括props、事件(v-on)和slot用于父子组件间的通信。最后,讲解了异步加载组件的定义和用法,如何根据服务器返回的数据动态渲染组件。
摘要由CSDN通过智能技术生成

一)v-for

在定义组件中可以使用v-f or,但因为父子组件间作用域独立,所以父组件中的数据必须通过props引入子组件中;

eg:<div id="i1">

       <my v-for="item in items" :a="item"></my>

    </div>

    Vue.component("my",{

                     template:"<p>{{a}}</p>",

                     props:["a"],

                        });

    new Vue({

            el:"#i1",

            data:{items:[....]}

            });

二)可复用组件

特点:因为父子组件的作用域不同,所以父组件必须在公开的接口将其所在的作用域与子组件的作用域连通;

props:将父组件的数据传给子组件;v-bind

事件:将子组件的动态反馈给父组件;v-on

slot:将父组件的内容传给子组件中;<slot>

三)异步加载组件

定义:异步请求时,根据服务器返回的数据去渲染一个自定义的组件,或者表示加载失败。

用法:定义一个异步组件函数。

语法:Vue.component(A,function(res,rej){})


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值