Vue组件基础

一)注册:

全局注册:

语法:Vue.component(name,obj或func);其中obj为配置对象,func是子类构造函数;

注意事项:

1),定义的组件可以直接在html页面书写;

2),必须在vue实例定义前定义组件;

局部注册:该组件只能存在特定的实例之中; 

语法:new Vue({components:{组件:obj或func}});

二)数据传递:

组件间数据传递存在三种方式:props、组件通信、slot;

props:专门接受父组件传入的数据;

第一种声明方式:以数组形式声明;eg:props:["a",...];

第二种声明方式:对象形式(主要是用于props值的检验);

eg:props:{

   A:string(Number,Boolean,Object,Function,Array),

   B:[string,object],

   C:{type:string,require:boolean,defalut:"en",validator:function(value){}}

}

父子间:

vm.$children:组件中的子元素;

vm.$parent:组件中的父元素;

vm:$oot:组件中的根元素;

以上三种都不太适合父子间通信,

ref与$refs:只能用在组件本身(内部),不能用于父子组件间通信。

父子间通信示意图:

父组件(发)-------(prop传递数据)-------子组件(收)

父组件(监听)------(自定义事件)---------子组件(发射)

发射:$emit(自定义事件[,数据]);

监听:$on(自定义事件,callback)或者v-on:自定义事件=“函数名”

兄弟组件间通信:可以用它们所在的vue实例作为总管,负责发射和监听。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值